button

docs/.vuepress/components/lv-button.vue

@@ -0,0 +1,111 @@
+<template>
+    <button
+        class="lv-button"
+        :class="['lv-type-' + type, round ? 'round' : '', hand ? 'hand' : '', size]"
+        :style="styleObject"
+        @click="handleClick">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+export default {
+    name: 'lv-button',
+    props: {
+        type: {
+            type: String,
+            default: 'default'
+        },
+        round: {
+            type: Boolean,
+            default: false
+        },
+        hand: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: 'medium'
+        },
+        bgColor: String,
+        fontColor: String,
+    },
+    data () {
+        return {
+            styleObject: {}
+        }
+    },
+    mounted() {
+        if (this.bgColor) {
+            this.$set(this.styleObject, 'background-color', this.bgColor);
+            this.$set(this.styleObject, 'border-color', this.bgColor);
+        }
+        if (this.fontColor) {
+            this.$set(this.styleObject, 'color', this.fontColor);
+        }
+    },
+    methods: {
+        handleClick(env) {
+            this.$emit('click', env)
+        }
+    }
+}
+</script>
+
+<style lang="less" scope>
+@import url('../public/less/color');
+.lv {
+    &-button {
+        border: 0;
+        margin: 0;
+        color: @black;
+        font-size: var(--main_font_size, 14px);
+        user-select: none;
+        padding: 6px 20px;
+        border: solid 1px @border;
+        background-color: @white;
+        margin: 0 2px;
+        &.round {
+            border-radius: 20px;
+        }
+        &.hand {
+            cursor: pointer;
+        }
+        &.small {
+            padding: 3px 10px;
+        }
+        &.big {
+            padding: 10px 20px;
+        }
+        &[disabled] {
+            opacity: .5;
+        }
+    }
+    &-type-primary {
+        color: @white;
+        border: solid 1px @primary;
+        background-color: @primary;
+    }
+    &-type-success {
+        color: @white;
+        border: solid 1px @success;
+        background-color: @success;
+    }
+    &-type-info {
+        color: @white;
+        border: solid 1px @info;
+        background-color: @info;
+    }
+    &-type-warning {
+        color: @white;
+        border: solid 1px @warning;
+        background-color: @warning;
+    }
+    &-type-danger {
+        color: @white;
+        border: solid 1px @danger;
+        background-color: @danger;
+    }
+}
+</style>

docs/.vuepress/components/lv-dialog.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="lv-dialog" v-if="show">
+        <div class="lv-content">
+            <div class="header">
+                <div class="title">{{title ? title : '提示'}}</div>
+                <div class="close" @click="close"></div>
+            </div>
+        </div>
+        <div class="lv-bg"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'lv-dialog',
+    data () {
+        return {
+            show: false,
+        }
+    },
+    watch: {
+        value(newV) {
+            this.show = newV;
+        }
+    },
+    props: {
+        value: {
+            type: Boolean,
+            default: false
+        },
+        title: String,
+    },
+    methods: {
+        close() {
+            this.$emit('input', false);
+        }
+    }
+}
+</script>
+
+<style lang="less" scope>
+.lv {
+    &-dialog {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    &-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, .5);
+    }
+    &-content {
+        user-select: none;
+        position: absolute;
+        z-index: 1000;
+        top: 50%;
+        left: 50%;
+        width: 30%;
+        min-width: 500px;
+        min-height: 300px;
+        background-color: #fff;
+        transform: translate(-50%, -50%);
+        .header {
+            position: relative;
+            height: 56px;
+            line-height: 56px;
+            border-bottom: solid 1px rgba(0, 0, 0, 0.06);
+            .title {
+                font-weight: bold;
+                text-align: center;
+            }
+            .close {
+                position: absolute;
+                cursor: pointer;
+                top: 18px;
+                right: 20px;
+                width: 20px;
+                height: 20px;
+                &::before, &::after {
+                    position: absolute;
+                    content: '';
+                    left: 10px;
+                    width: 1px;
+                    height: 20px;
+                    background-color: #666;
+                }
+                &::before {
+                    transform: rotate(45deg);
+                }
+                &::after {
+                    transform: rotate(-45deg);
+                }
+            }
+        }
+    }
+}
+</style>

docs/.vuepress/dist/404.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>票圈UI交互库</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="">
+    
+    <link rel="preload" href="/assets/css/0.styles.46e20256.css" as="style"><link rel="preload" href="/assets/js/app.199d0b78.js" as="script"><link rel="preload" href="/assets/js/10.a3f9a869.js" as="script"><link rel="prefetch" href="/assets/js/11.dfc5f503.js"><link rel="prefetch" href="/assets/js/12.f05fc51f.js"><link rel="prefetch" href="/assets/js/2.37a7aac8.js"><link rel="prefetch" href="/assets/js/3.e86eb6c5.js"><link rel="prefetch" href="/assets/js/4.81bef236.js"><link rel="prefetch" href="/assets/js/5.18158a32.js"><link rel="prefetch" href="/assets/js/6.4bd7b5ec.js"><link rel="prefetch" href="/assets/js/7.dbf37e39.js"><link rel="prefetch" href="/assets/js/8.e6abd6f2.js"><link rel="prefetch" href="/assets/js/9.4edac015.js">
+    <link rel="stylesheet" href="/assets/css/0.styles.46e20256.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/" class="router-link-active">
+      Take me home.
+    </a></div></div><div class="global-ui"></div></div>
+    <script src="/assets/js/app.199d0b78.js" defer></script><script src="/assets/js/10.a3f9a869.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/assets/img/search.83621669.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

docs/.vuepress/dist/assets/js/10.a3f9a869.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{363:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(40),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);

docs/.vuepress/dist/assets/js/11.dfc5f503.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{371:function(t,e,n){"use strict";n.r(e);var s=n(40),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);

docs/.vuepress/dist/assets/js/12.f05fc51f.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{369:function(t,a,s){"use strict";s.r(a);var r=s(40),e=Object(r.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"指南"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#指南"}},[t._v("#")]),t._v(" 指南")]),t._v(" "),s("h2",{attrs:{id:"安装"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装"}},[t._v("#")]),t._v(" 安装")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// npm源切换至 http://192.168.203.180:4873/")]),t._v("\nnpm install "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("save lv"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("ui\n")])])]),s("h2",{attrs:{id:"快速上手"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#快速上手"}},[t._v("#")]),t._v(" 快速上手")])])}),[],!1,null,null,null);a.default=e.exports}}]);

docs/.vuepress/dist/assets/js/3.e86eb6c5.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{327:function(t,n,e){},357:function(t,n,e){"use strict";e(327)},364:function(t,n,e){"use strict";e.r(n);var l={name:"lv-button",props:{type:{type:String,default:"default"},round:{type:Boolean,default:!1},hand:{type:Boolean,default:!1}},data:function(){return{}},methods:{handleClick:function(t){this.$emit("click",t)}}},u=(e(357),e(40)),a=Object(u.a)(l,(function(){var t=this.$createElement;return(this._self._c||t)("button",{staticClass:"lv-button",class:["lv-type-"+this.type,this.round?"round":"",this.hand?"hand":""],on:{click:this.handleClick}},[this._t("default")],2)}),[],!1,null,null,null);n.default=a.exports}}]);

docs/.vuepress/dist/assets/js/4.81bef236.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{328:function(t,n,s){},358:function(t,n,s){"use strict";s(328)},366:function(t,n,s){"use strict";s.r(n);var i={name:"lv-row",data:function(){return{}}},a=(s(358),s(40)),e=Object(a.a)(i,(function(){var t=this.$createElement,n=this._self._c||t;return n("div",{staticClass:"lv-row"},[n("div",{staticClass:"lv-margin"},[this._t("default")],2)])}),[],!1,null,"10c2db72",null);n.default=e.exports}}]);

docs/.vuepress/dist/assets/js/5.18158a32.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{329:function(t,e,n){},359:function(t,e,n){"use strict";n(329)},372:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(359),n(40)),p=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=p.exports}}]);

docs/.vuepress/dist/assets/js/6.4bd7b5ec.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{331:function(t,e,a){},361:function(t,e,a){"use strict";a(331)},368:function(t,e,a){"use strict";a.r(e);var n={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(361),a(40)),s=Object(i.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=s.exports}}]);

docs/.vuepress/dist/assets/js/7.dbf37e39.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{330:function(e,t,a){},360:function(e,t,a){"use strict";a(330)},367:function(e,t,a){"use strict";a.r(t);a(68),a(29),a(93);var o={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(360),a(40)),c=Object(n.a)(o,(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){return a("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n            "+e._s(t.title)+"\n          ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);

docs/.vuepress/dist/assets/js/9.4edac015.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{365:function(n,t,e){"use strict";e.r(t);var a={name:"lv-dialog",data:function(){return{}}},l=e(40),u=Object(l.a)(a,(function(){var n=this.$createElement;return(this._self._c||n)("div")}),[],!1,null,null,null);t.default=u.exports}}]);

docs/.vuepress/dist/components/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>组件 | 票圈UI交互库</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="">
+    
+    <link rel="preload" href="/assets/css/0.styles.46e20256.css" as="style"><link rel="preload" href="/assets/js/app.199d0b78.js" as="script"><link rel="preload" href="/assets/js/2.37a7aac8.js" as="script"><link rel="preload" href="/assets/js/8.e6abd6f2.js" as="script"><link rel="preload" href="/assets/js/3.e86eb6c5.js" as="script"><link rel="prefetch" href="/assets/js/10.a3f9a869.js"><link rel="prefetch" href="/assets/js/11.dfc5f503.js"><link rel="prefetch" href="/assets/js/12.f05fc51f.js"><link rel="prefetch" href="/assets/js/4.81bef236.js"><link rel="prefetch" href="/assets/js/5.18158a32.js"><link rel="prefetch" href="/assets/js/6.4bd7b5ec.js"><link rel="prefetch" href="/assets/js/7.dbf37e39.js"><link rel="prefetch" href="/assets/js/9.4edac015.js">
+    <link rel="stylesheet" href="/assets/css/0.styles.46e20256.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">票圈UI交互库</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><a href="/guide/" class="sidebar-link">指南</a></li><li><a href="/components/" aria-current="page" class="active sidebar-link">组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/#按钮" class="sidebar-link">按钮</a></li><li class="sidebar-sub-header"><a href="/components/#弹出授权框" class="sidebar-link">弹出授权框</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组件"><a href="#组件" class="header-anchor">#</a> 组件</h1> <h2 id="按钮"><a href="#按钮" class="header-anchor">#</a> 按钮</h2> <blockquote><p>型号：大、中(默认)、小<br>
+功能：直角、圆角、手型<br>
+类型：默认、主要、成功、信息、警告、危险</p></blockquote> <h3 id="基础用法"><a href="#基础用法" class="header-anchor">#</a> 基础用法</h3> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-row</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-button</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>主要按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>成功按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>信息按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>警告按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>危险按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-row</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><hr> <button class="lv-button lv-type-default">默认</button> <button class="lv-button lv-type-primary">主要</button> <button class="lv-button lv-type-success">成功</button> <button class="lv-button lv-type-info">信息</button> <button class="lv-button lv-type-warning">警告</button> <button class="lv-button lv-type-danger">危险</button> <hr> <button class="lv-button lv-type-default round">默认</button> <button class="lv-button lv-type-primary round">主要</button> <button class="lv-button lv-type-success round">成功</button> <button class="lv-button lv-type-info round">信息</button> <button class="lv-button lv-type-warning round">警告</button> <button class="lv-button lv-type-danger round">危险</button> <hr> <button class="lv-button lv-type-default round hand">手型</button> <h2 id="弹出授权框"><a href="#弹出授权框" class="header-anchor">#</a> 弹出授权框</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>lv-authorize</span>
+    <span class="token attr-name">sendUrl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">checkUrl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">@success</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>lv-authorize</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>sendUrl</td> <td>发送验证码接口</td> <td></td> <td></td> <td></td></tr> <tr><td>checkUrl</td> <td>校验验证码接口</td> <td></td> <td></td> <td></td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/" class="prev">
+        指南
+      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/assets/js/app.199d0b78.js" defer></script><script src="/assets/js/2.37a7aac8.js" defer></script><script src="/assets/js/8.e6abd6f2.js" defer></script><script src="/assets/js/3.e86eb6c5.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/guide/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>指南 | 票圈UI交互库</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="">
+    
+    <link rel="preload" href="/assets/css/0.styles.46e20256.css" as="style"><link rel="preload" href="/assets/js/app.199d0b78.js" as="script"><link rel="preload" href="/assets/js/2.37a7aac8.js" as="script"><link rel="preload" href="/assets/js/12.f05fc51f.js" as="script"><link rel="prefetch" href="/assets/js/10.a3f9a869.js"><link rel="prefetch" href="/assets/js/11.dfc5f503.js"><link rel="prefetch" href="/assets/js/3.e86eb6c5.js"><link rel="prefetch" href="/assets/js/4.81bef236.js"><link rel="prefetch" href="/assets/js/5.18158a32.js"><link rel="prefetch" href="/assets/js/6.4bd7b5ec.js"><link rel="prefetch" href="/assets/js/7.dbf37e39.js"><link rel="prefetch" href="/assets/js/8.e6abd6f2.js"><link rel="prefetch" href="/assets/js/9.4edac015.js">
+    <link rel="stylesheet" href="/assets/css/0.styles.46e20256.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">票圈UI交互库</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><a href="/guide/" aria-current="page" class="active sidebar-link">指南</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/guide/#快速上手" class="sidebar-link">快速上手</a></li></ul></li><li><a href="/components/" class="sidebar-link">组件</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="指南"><a href="#指南" class="header-anchor">#</a> 指南</h1> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// npm源切换至 http://192.168.203.180:4873/</span>
+npm install <span class="token operator">--</span>save lv<span class="token operator">-</span>ui
+</code></pre></div><h2 id="快速上手"><a href="#快速上手" class="header-anchor">#</a> 快速上手</h2></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/" class="prev router-link-active">
+        首页
+      </a></span> <span class="next"><a href="/components/">
+        组件
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/assets/js/app.199d0b78.js" defer></script><script src="/assets/js/2.37a7aac8.js" defer></script><script src="/assets/js/12.f05fc51f.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>票圈UI交互库</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="">
+    
+    <link rel="preload" href="/assets/css/0.styles.46e20256.css" as="style"><link rel="preload" href="/assets/js/app.199d0b78.js" as="script"><link rel="preload" href="/assets/js/2.37a7aac8.js" as="script"><link rel="preload" href="/assets/js/11.dfc5f503.js" as="script"><link rel="prefetch" href="/assets/js/10.a3f9a869.js"><link rel="prefetch" href="/assets/js/12.f05fc51f.js"><link rel="prefetch" href="/assets/js/3.e86eb6c5.js"><link rel="prefetch" href="/assets/js/4.81bef236.js"><link rel="prefetch" href="/assets/js/5.18158a32.js"><link rel="prefetch" href="/assets/js/6.4bd7b5ec.js"><link rel="prefetch" href="/assets/js/7.dbf37e39.js"><link rel="prefetch" href="/assets/js/8.e6abd6f2.js"><link rel="prefetch" href="/assets/js/9.4edac015.js">
+    <link rel="stylesheet" href="/assets/css/0.styles.46e20256.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" aria-current="page" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">票圈UI交互库</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/" aria-current="page" class="active sidebar-link">首页</a></li><li><a href="/guide/" class="sidebar-link">指南</a></li><li><a href="/components/" class="sidebar-link">组件</a></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><!----> <h1 id="main-title">
+      票圈前端组件库
+    </h1> <p class="description">
+      为开发节约时间、为设计提供规范的组件库
+    </p> <p class="action"><a href="/guide/" class="nav-link action-button">
+  快速上手 →
+</a></p></header> <div class="features"><div class="feature"><h2>简洁至上</h2> <p>以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。</p></div><div class="feature"><h2>Vue驱动</h2> <p>享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。</p></div><div class="feature"><h2>高性能</h2> <p>VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。</p></div></div> <div class="theme-default-content custom content__default"></div> <div class="footer">
+    www.piaoquantv.com
+  </div></main></div><div class="global-ui"></div></div>
+    <script src="/assets/js/app.199d0b78.js" defer></script><script src="/assets/js/2.37a7aac8.js" defer></script><script src="/assets/js/11.dfc5f503.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/less/color.less

@@ -0,0 +1,12 @@
+@white: white;
+@black: black;
+@mainColor: #20214F;
+@secondColor: #1890FF;
+@fontColor: #333;
+@border: #dcdfe6;
+
+@primary: #409eff;
+@success: #67c23a;
+@info: #909399;
+@warning: #e6a23c;
+@danger: #f56c6c;

docs/.vuepress/public/less/color.less

@@ -0,0 +1,12 @@
+@white: white;
+@black: black;
+@mainColor: #20214F;
+@secondColor: #1890FF;
+@fontColor: #333;
+@border: #dcdfe6;
+
+@primary: #409eff;
+@success: #67c23a;
+@info: #909399;
+@warning: #e6a23c;
+@danger: #f56c6c;

docs/components/README.md

@@ -2,31 +2,102 @@
 
 ## 按钮
 
+> 型号：大、中(默认)、小<br />
+> 功能：直角、圆角、手型<br />
+> 类型：默认、主要、成功、信息、警告、危险<br/>
+> 扩展：自定义背景色、自定义文字颜色
+
 ### 基础用法
 
+---
+
+<lv-button>默认</lv-button>
+<lv-button type="primary">主要</lv-button>
+<lv-button type="success">成功</lv-button>
+<lv-button type="info">信息</lv-button>
+<lv-button type="warning">警告</lv-button>
+<lv-button type="danger">危险</lv-button>
+
+---
+
+<lv-button round>默认</lv-button>
+<lv-button round type="primary">主要</lv-button>
+<lv-button round type="success">成功</lv-button>
+<lv-button round type="info">信息</lv-button>
+<lv-button round type="warning">警告</lv-button>
+<lv-button round type="danger">危险</lv-button>
+
+---
+
+<lv-button round hand>手型</lv-button>
+<lv-button round type="primary" disabled>禁用</lv-button>
+<lv-button round bgColor="#20214F" fontColor="#fff">自定义颜色</lv-button>
+
 ```vue
-<lv-row>
-    <lv-button></lv-button>
-    <lv-button type="primary">主要按钮</lv-button>
-    <lv-button type="success">成功按钮</lv-button>
-    <lv-button type="info">信息按钮</lv-button>
-    <lv-button type="warning">警告按钮</lv-button>
-    <lv-button type="danger">危险按钮</lv-button>
-</lv-row>
+<lv-button>默认</lv-button>
+<lv-button type="primary">主要</lv-button>
+<lv-button type="success">成功</lv-button>
+<lv-button type="info">信息</lv-button>
+<lv-button type="warning">警告</lv-button>
+<lv-button type="danger">危险</lv-button>
+
+<lv-button round>圆角</lv-button>
+
+<lv-button round hand>手型</lv-button>
+<lv-button round type="primary" disabled>禁用</lv-button>
+<lv-button round bgColor="#20214F" fontColor="#fff">自定义颜色</lv-button>
 ```
 
-## 弹出授权框
+|  参数   | 说明  |  类型  |  可选值  |  默认值 |
+|  ----  | ----  | ----  | ------  | -----  |
+| size  | 尺寸 | String | big / medium / small | medium |
+| type  | 类型 | String | primary / success / info / warning / danger | default |
+| round  | 是否圆角 | Boolean | - | false |
+| hand  | 是否手型 | Boolean | - | false |
+| disabled  | 是否禁用 | Boolean | - | false |
+| bgColor  | 背景颜色 | String | - | - |
+| fontColor  | 文字颜色 | String | - | - |
+
+## 弹出层
+
+> 功能：弹出层(直角、圆角)<br />
+> 扩展：自定义宽高
+### 基础用法
+
+---
+
+<lv-button @click="showDefaultDialog = true">点我弹出</lv-button>
+<lv-dialog v-model="showDefaultDialog" title="授权"></lv-dialog>
 
 ```vue
-<lv-authorize
-    sendUrl=""
-    checkUrl=""
-    @success="">
-</lv-authorize>
+<lv-dialog
+    title="授权"
+    v-model="var">
+</lv-dialog>
 ```
 
 |  参数   | 说明  |  类型  |  可选值  |  默认值 |
 |  ----  | ----  | ----  | ------  | -----  |
-| sendUrl  | 发送验证码接口 |
-| checkUrl  | 校验验证码接口 |
+| title  | 标题 | String | - | 提示 |
+
+<script>
+    export default {
+        data () {
+            return {
+                showDefaultDialog: false,
+            }
+        }
+    }
+</script>
 
+<style>
+table {
+    width: 100%;
+    display: table;
+    text-align: center;
+}
+th {
+    color: #000;
+    background-color: #eee;
+}
+</style>

docs/guide/README.md

@@ -8,4 +8,34 @@
 npm install --save lv-ui
 ```
 
-## 快速上手
+## 快速上手
+
+### 全部引用
+
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import lvui from './components/index'
+
+Vue.config.productionTip = false
+Vue.use(lvui)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+### 局部引用
+
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import { button } from './components/index'
+
+Vue.config.productionTip = false
+Vue.use(button)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```

gulpfile.js

@@ -0,0 +1,15 @@
+let gulp = require('gulp');
+let replace = require('gulp-replace');
+
+gulp.task('less', () => {
+    return gulp.src('./src/assets/less/*')
+        .pipe(gulp.dest('./docs/.vuepress/public/less/'))
+})
+
+gulp.task('component', () => {
+    return gulp.src('./src/components/lib/*')
+        .pipe(replace('../../assets/', '../public/'))
+        .pipe(gulp.dest('./docs/.vuepress/components/'))
+})
+
+gulp.task('default', gulp.series('less', 'component'));

package.json

@@ -8,7 +8,8 @@
     "build": "vue-cli-service build",
     "build:docs": "vuepress build docs",
     "build:component": "vue-cli-service build --target lib --name lv ./src/components/index.js",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "prebuild:docs": "gulp"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -21,6 +22,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "gulp": "^4.0.2",
+    "gulp-replace": "^1.1.3",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.11",

src/App.vue

@@ -1,24 +1,22 @@
 <template>
   <div id="app">
-    <lv-row>
       <lv-button @click="aaa">默认</lv-button>
       <lv-button type="primary">主要</lv-button>
       <lv-button type="success">成功</lv-button>
       <lv-button type="info">信息</lv-button>
       <lv-button type="warning">警告</lv-button>
       <lv-button type="danger">危险</lv-button>
-    </lv-row>
-    <lv-row>
+      <div class="clear"></div>
       <lv-button round>默认</lv-button>
       <lv-button round type="primary">主要</lv-button>
       <lv-button round type="success">成功</lv-button>
       <lv-button round type="info">信息</lv-button>
       <lv-button round type="warning">警告</lv-button>
       <lv-button round type="danger">危险</lv-button>
-    </lv-row>
-    <lv-row>
-      <lv-button round hand>默认</lv-button>
-    </lv-row>
+      <div class="clear"></div>
+      <lv-button bgColor="#ccc">自定义颜色</lv-button>
+
+      <lv-dialog v-model="show">自定义颜色</lv-dialog>
   </div>
 </template>
 
@@ -26,7 +24,9 @@
 export default {
   name: 'App',
   data() {
-    return {}
+    return {
+      show: false
+    }
   },
   components: {
   },
@@ -47,4 +47,9 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.clear {
+  height: 4px;
+  overflow: hidden;
+}
 </style>

src/components/index.js

@@ -1,11 +1,9 @@
 import button from './lib/lv-button';
 import dialog from './lib/lv-dialog';
-import row from './lib/lv-row';
 
 const components = [
     button,
     dialog,
-    row
 ];
 
 // 导出全部
@@ -25,6 +23,5 @@ components.forEach(item => {
 export {
     button,
     dialog,
-    row
 }
 

src/components/lib/lv-button.vue

@@ -1,5 +1,9 @@
 <template>
-    <button class="lv-button" :class="['lv-type-' + type, round ? 'round' : '', hand ? 'hand' : '']" @click="clickHandle">
+    <button
+        class="lv-button"
+        :class="['lv-type-' + type, round ? 'round' : '', hand ? 'hand' : '', size]"
+        :style="styleObject"
+        @click="handleClick">
         <slot></slot>
     </button>
 </template>
@@ -19,14 +23,31 @@ export default {
         hand: {
             type: Boolean,
             default: false
-        }
+        },
+        size: {
+            type: String,
+            default: 'medium'
+        },
+        bgColor: String,
+        fontColor: String,
     },
     data () {
-        return {}
+        return {
+            styleObject: {}
+        }
+    },
+    mounted() {
+        if (this.bgColor) {
+            this.$set(this.styleObject, 'background-color', this.bgColor);
+            this.$set(this.styleObject, 'border-color', this.bgColor);
+        }
+        if (this.fontColor) {
+            this.$set(this.styleObject, 'color', this.fontColor);
+        }
     },
     methods: {
-        clickHandle() {
-            this.$emit('click')
+        handleClick(env) {
+            this.$emit('click', env)
         }
     }
 }
@@ -51,6 +72,15 @@ export default {
         &.hand {
             cursor: pointer;
         }
+        &.small {
+            padding: 3px 10px;
+        }
+        &.big {
+            padding: 10px 20px;
+        }
+        &[disabled] {
+            opacity: .5;
+        }
     }
     &-type-primary {
         color: @white;

src/components/lib/lv-dialog.vue

@@ -1,12 +1,104 @@
 <template>
-    <div></div>
+    <div class="lv-dialog" v-if="show">
+        <div class="lv-content">
+            <div class="header">
+                <div class="title">{{title ? title : '提示'}}</div>
+                <div class="close" @click="close"></div>
+            </div>
+        </div>
+        <div class="lv-bg"></div>
+    </div>
 </template>
 
 <script>
 export default {
     name: 'lv-dialog',
     data () {
-        return {}
+        return {
+            show: false,
+        }
+    },
+    watch: {
+        value(newV) {
+            this.show = newV;
+        }
+    },
+    props: {
+        value: {
+            type: Boolean,
+            default: false
+        },
+        title: String,
+    },
+    methods: {
+        close() {
+            this.$emit('input', false);
+        }
     }
 }
-</script>
+</script>
+
+<style lang="less" scope>
+.lv {
+    &-dialog {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    &-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, .5);
+    }
+    &-content {
+        user-select: none;
+        position: absolute;
+        z-index: 1000;
+        top: 50%;
+        left: 50%;
+        width: 30%;
+        min-width: 500px;
+        min-height: 300px;
+        background-color: #fff;
+        transform: translate(-50%, -50%);
+        .header {
+            position: relative;
+            height: 56px;
+            line-height: 56px;
+            border-bottom: solid 1px rgba(0, 0, 0, 0.06);
+            .title {
+                font-weight: bold;
+                text-align: center;
+            }
+            .close {
+                position: absolute;
+                cursor: pointer;
+                top: 18px;
+                right: 20px;
+                width: 20px;
+                height: 20px;
+                &::before, &::after {
+                    position: absolute;
+                    content: '';
+                    left: 10px;
+                    width: 1px;
+                    height: 20px;
+                    background-color: #666;
+                }
+                &::before {
+                    transform: rotate(45deg);
+                }
+                &::after {
+                    transform: rotate(-45deg);
+                }
+            }
+        }
+    }
+}
+</style>

src/components/lib/lv-row.vue

@@ -1,25 +0,0 @@
-<template>
-    <div class="lv-row">
-        <div class="lv-margin">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'lv-row',
-    data () {
-        return {}
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.lv-row {
-    overflow: hidden;
-    .lv-margin {
-        margin: 2px 0;
-    }
-}
-</style>