btxui 1.0.1

package/pages/example/app_wid/tooltip_wid_demo.vue

@@ -0,0 +1,117 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>该组件主要通过 API 实现交互效果。通常会结合内容区域的 mouseenter 事件执行 <code>show()</code>，mousemove 事件执行 <code>set_pos()</code>，mouseleave 事件执行 <code>hide()</code>。执行 set_pos 方法时，可以使用事件对象的 page.X、page.Y 属性进行传参，实现跟随效果。</p>
+            <div class="resize">
+                <tooltip-wid ref="tooltip1" />
+                <div class="pcenter">
+                    <div class="pad-v-3 bg-color-lgray round-sm"
+                         @mouseenter="$_show1"
+                         @mousemove="$_move1"
+                         @mouseleave="$_hide1">
+                        鼠标悬停并移动，跟随显示 tooltip
+                    </div>
+                </div>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义颜色-->
+        <section>
+            <h5>自定义颜色</h5>
+            <p>通过 <code>colors</code> 属性可以自定义提示框颜色；<code>offset</code> 属性则可以偏移提示框定位。</p>
+            <div class="resize">
+                <tooltip-wid v-bind="data_2" ref="tooltip2" />
+                <div class="pcenter">
+                    <div class="pad-v-3 bg-color-lgray round-sm"
+                         @mouseenter="$_show2"
+                         @mousemove="$_move2"
+                         @mouseleave="$_hide2">
+                        鼠标悬停并移动，跟随显示 tooltip
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import TooltipWid from "@/components/BTXUI/tooltip/tooltip-wid"
+
+    export default {
+        name: "tooltip_wid_demo",
+        components: {
+            HeaderInfo,
+            TooltipWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: TooltipWid.name,
+                    ...TooltipWid.introduce,
+                },
+
+                data_2: {
+                    colors: {
+                        text: "#ddd",
+                        bg: "dgray",
+                        line: "dark",
+                        point: "blue"
+                    },
+                    offset: {
+                        x: -40,
+                        y: -170
+                    }
+                }
+
+            }
+        },
+        computed: {
+
+            tooltip1(){
+                return this.$refs.tooltip1;
+            },
+
+            tooltip2(){
+                return this.$refs.tooltip2;
+            },
+
+        },
+        methods: {
+
+            $_show1(){
+                this.tooltip1.show("<b>HTML</b> 称为<span class='color-blue'>超文本标记语言</span>");
+            },
+
+            $_move1(e){
+                this.tooltip1.set_pos(e.pageX, e.pageY);
+            },
+
+            $_hide1(){
+                this.tooltip1.hide();
+            },
+
+            $_show2(){
+                this.tooltip2.show("<b class='fsize-1d4'>Flutter</b><br> 是 Google 开源的 <span class='color-green'>UI 工具包</span>");
+            },
+
+            $_move2(e){
+                this.tooltip2.set_pos(e.pageX, e.pageY);
+            },
+
+            $_hide2(){
+                this.tooltip2.hide();
+            }
+
+        }
+    }
+</script>

package/pages/example/app_wid/upload_wid_demo.vue

@@ -0,0 +1,123 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>通过 <code>v-model</code> 可以初始化及接收上传文件内容。默认为单文件直接上传，仅需配置上传接口 <code>uploadApi</code>。注：默认上传文件大小限制为 2M。</p>
+            <p>测试接口：<span class="alpha-d7 color-blue">{{upload_api}}</span></p>
+            <div class="resize">
+                <upload-wid v-bind="data_1.props" v-model="data_1.remote_file"/>
+            </div>
+            <p>上传文件地址：<code v-if="data_1.remote_file.length">{{data_1.remote_file[0]}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--限制文件类型-->
+        <section>
+            <h5>限制文件类型</h5>
+            <p>通过 <code>type</code> 字段可以限制上传文件类型，默认可上传任意类型，数组形式设置之后仅支持包含后缀类型。此外通过 <code>btnData</code> 字段可以设置上传按钮。</p>
+            <div class="resize">
+                <div class="fsize-1d2">
+                    <upload-wid v-bind="data_2.props" v-model="data_2.remote_file" />
+                </div>
+            </div>
+            <p>上传文件地址：<code v-if="data_2.remote_file.length">{{data_2.remote_file[0]}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--多文件上传-->
+        <section>
+            <h5>多文件上传</h5>
+            <p>通过 <code>multiple</code> 字段可以开启多文件上传。</p>
+            <div class="resize">
+                <upload-wid v-bind="data_3.props" v-model="data_3.remote_files" />
+            </div>
+            <p>上传文件地址：</p>
+            <ol v-if="data_3.remote_files.length">
+                <p v-for="file of data_3.remote_files"><code>{{file}}</code></p>
+            </ol>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import UploadWid from "@/components/BTXUI/upload/upload-wid"
+    import server from "@/assets/server.js"
+
+    const uploadApi = server.apis.upload;
+
+    export default {
+        name: "upload_wid_demo",
+        components: {
+            HeaderInfo,
+            UploadWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: UploadWid.name,
+                    ...UploadWid.introduce,
+                },
+
+                //服务接口
+                upload_api: uploadApi,
+
+                data_1: {
+                    props: {
+                        uploadApi,
+                    },
+                    remote_file: []
+                },
+
+                data_2: {
+                    props: {
+                        uploadApi,
+                        type: ["jpg", "png"],
+                        btnData: {
+                            btnText: "uplaod file",
+                            btnRound: true,
+                            btnColor: {
+                                normal: {
+                                    text: "light",
+                                    bg: "blue",
+                                    line: "none",
+                                },
+                                hover: {
+                                    text: "#ddd",
+                                    bg: "#1363e3",
+                                    line: "none",
+                                },
+                            },
+                            btnWidth: 16,
+                            iconData: {
+                                icon: "download"
+                            }
+                        }
+                    },
+                    remote_file: []
+                },
+
+                data_3: {
+                    props: {
+                        uploadApi,
+                        type: ["txt"],
+                        btnData: {
+                            btnText: "上传 .txt 文件",
+                        },
+                        multiple: true
+                    },
+                    remote_files: []
+                }
+
+            }
+        }
+    }
+</script>

package/pages/example/base_wid/b_drag_demo.vue

@@ -0,0 +1,159 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础拖拽使用-->
+        <section>
+            <h5>基础拖拽使用</h5>
+            <p>组件包裹的元素将具有拖拽交互效果，其中 <code>dragStart</code> 和 <code>dragOver</code> 属性则可以设置 "拖拽开始"（物品）及 "拖拽放入"（容器）时的状态样式。</p>
+            <div class="flex-4">
+                <b-drag id="obj" styles="flex-5 h-3 w-10 bg-color-blue color-light round-sm mrg-r-4"
+                        :dataInfo="{id: 'obj'}"
+                        dragStart="bg-color-green">
+                    物品
+                </b-drag>
+                <b-drag styles="flex-5 h-4 w-12 dashed line-mgray thick-1 round-sm"
+                        dragOver="bg-color-neutral"
+                        @on_drop="$_append_obj1">
+                    容器
+                </b-drag>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--拖拽传递数据-->
+        <section>
+            <h5>拖拽传递数据</h5>
+            <p>通过 <code>dataInfo</code> 属性可以绑定拖拽传递的数据。在 "拖拽放入"（容器）元素上通过 <code>on_drop</code> 事件可以接收，其中 <b>you</b> 字段存储传递数据；<b>me</b> 字段存储自身数据。</p>
+            <div class="flex-4">
+                <b-drag styles="flex-5 pad-h-2 pad-v-.5 bg-color-lgray round-sm mrg-r-4 line line-neutral thick-1"
+                        :dataInfo="{book_name: data2.book_name}">
+                    {{data2.book_name}}
+                </b-drag>
+                <b-drag styles="flex-5 pad-h-2 pad-v-.5 w-12 dashed line-mgray thick-1 round-sm"
+                        @on_drop="$_append_book2">
+                    购物车
+                </b-drag>
+            </div>
+            <p>
+                已购书籍：<b v-if="data2.bought">{{data2.bought}}</b><span v-else class="color-mgray">暂无购买书籍</span>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自由拖动-->
+        <section>
+            <h5>自由拖动</h5>
+            <p>通过 <code>freeDrag</code> 属性可以实现元素的自由拖放。元素的拖动区域，通常为拖动元素的 "包含块（offsetParent）"。</p>
+            <div class="flex-5 h-20 bg-color-lgray round-sm rel">
+                <div class="alpha-d4">拖动区域（offsetParent）</div>
+                <b-drag styles="w-4 h-4 bg-color-lgray round line line-mgray thick-1 shadow" @on_move="$_set_move_pos" v-bind="data3.props"></b-drag>
+            </div>
+            <p>
+                相对包含块当前坐标：<b>({{data3.pos.x}}, {{data3.pos.y}})</b>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自由拖动方向限制-->
+        <section>
+            <h5>自由拖动方向限制</h5>
+            <p>利用拖动元素的包含块区域限制特性，可以对拖动元素进行拖动方向限制。</p>
+            <div class="grid">
+                <div class="col-6 pad-d5">
+                    <div class="flex-5 h-15 bg-color-neutral round-sm pad-1">
+                        <div class="h-2 max-w rel round-lg bg-color-neutral ">
+                            <div class="abs pad-h-2 t-1rem max-w">
+                                <div class="line-b line-neutral thick-2"></div>
+                            </div>
+                            <b-drag styles="w-6 h-2 bg-color-lgray round-lg line line-mgray thick-1" v-bind="data4.props"></b-drag>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6 pad-d5">
+                    <div class="flex-5 h-15 bg-color-neutral round-sm pad-1">
+                        <div class="w-2 max-h round-lg rel bg-color-neutral">
+                            <div class="abs pad-v-2 l-1rem max-h">
+                                <div class="line-r max-h line-neutral thick-2"></div>
+                            </div>
+                            <b-drag styles="w-2 h-6 bg-color-lgray round-lg line line-mgray thick-1" v-bind="data4.props"></b-drag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import BDrag from "@/components/BTXUI/core/b-drag"
+
+    export default {
+        name: "b_drag_demo",
+        components: {
+            HeaderInfo,
+            BDrag
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: BDrag.name,
+                    ...BDrag.introduce,
+                },
+
+                data2: {
+                    book_name: "html + css 从入门到精通",
+                    bought: null
+                },
+
+                data3: {
+                    props: {
+                        freeDrag: true,
+                        dragStart: "bg-color-blue line-light"
+                    },
+                    pos: {
+                        x: 0,
+                        y: 0
+                    }
+                },
+
+                data4: {
+                    props: {
+                        freeDrag: true,
+                        dragStart: "bg-color-light line-light shadow color-neutral"
+                    }
+                }
+
+            }
+        },
+        methods: {
+
+            $_append_obj1(res, e){
+                const target = document.querySelector(`#${res.you.id}`);
+                target.style.transform = "scale(0)";
+                e.target.innerHTML = "<div class='w-10 h-3 bg-color-blue flex-5 round-sm color-light'>物品</div>";
+            },
+
+            $_append_book2(res){
+                const bought = this.data2.bought;
+                if(bought){
+                    this.$confirm.toast("该书籍已购买!", 2000, "notic");
+                }else {
+                    this.data2.bought = res.you.book_name;
+                }
+            },
+
+            $_set_move_pos(move_pos){
+                this.data3.pos = move_pos;
+            }
+
+        }
+    }
+</script>

package/pages/example/base_wid/b_grid_demo.vue

@@ -0,0 +1,225 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--响应式栅格布局-->
+        <section>
+            <h5>响应式栅格布局</h5>
+            <p>通过 <code>colData</code> 属性可设置栅格布局，包括均分和非均分 2 种形式，<b>items</b> 字段用于对每个项目进行栅格设置；<b>common_plan</b> 字段则用于对所有项目进行统一栅格设置。设置值可参考全局样式的栅格系统，且支持响应式分段。</p>
+            <p>通过 <code>gap</code> 属性可设置栅格元素的内边距，默认单位 rem。</p>
+            <p>【exp】：</p>
+            <b-grid styles="resize bg-color-dgray round-sm pad-.5" v-bind="data_1">
+                <div v-for="item of data_1.colData.items" :key="item.id" :slot="item.id"
+                     class="bg-color-dark flex-column color-sub round-sm flex-5 pad-v-1">
+                    <i :class="`ico-${item.icon} fsize-1d7 alpha-d5`"></i>
+                    <span>{{item.text}}</span>
+                </div>
+            </b-grid>
+            <p><b>common_plan</b> 字段一旦设置，会覆盖 <b>items</b> 内的局部栅格方案。</p>
+            <p>【exp】：</p>
+            <b-grid styles="resize bg-color-dgray round-sm pad-.5" v-bind="data_1_1">
+                <div v-for="item of data_1_1.colData.items" :key="item.id" :slot="item.id"
+                     class="bg-color-dark flex-column color-sub round-sm flex-5 pad-v-1">
+                    <i :class="`ico-${item.icon} fsize-1d7 alpha-d5`"></i>
+                    <span>{{item.text}}</span>
+                </div>
+            </b-grid>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--栅格系统边框样式-->
+        <section>
+            <h5>栅格系统边框样式</h5>
+            <p>通过 <code>gridHeight</code> 属性可限定元素高度，<code>line</code> 属性和 <code>outlineColor</code> 属性则可以分别设置栅格系统的内部边框颜色和外框样色。值得注意的是，外框样色通常选用背景色，可用以覆盖 "消除" 内部边框的 "溢出" 效果。</p>
+            <p>【exp】：</p>
+            <b-grid styles="resize round-md" v-bind="data_2">
+                <div v-for="item of data_2.colData.items" :key="item.id" :slot="item.id"
+                     class="flex-column round-sm flex-5 pad-v-1">
+                    <i :class="`ico-${item.icon} fsize-1d7 alpha-d5`"></i>
+                    <span>{{item.text}}</span>
+                </div>
+            </b-grid>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import BGrid from "@/components/BTXUI/core/b-grid"
+
+    export default {
+        name: "b_grid_demo",
+        components: {
+            HeaderInfo,
+            BGrid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: BGrid.name,
+                    ...BGrid.introduce,
+                },
+
+                data_1: {
+                    colData: {
+                        items: [
+                            {
+                                id: "a",
+                                plan: "col-3 col-4-m col-6-s",
+                                icon: "github",
+                                text: "github"
+                            },
+                            {
+                                id: "b",
+                                plan: "col-3 col-4-m col-6-s",
+                                icon: "download",
+                                text: "download"
+                            },
+                            {
+                                id: "c",
+                                plan: "col-3 col-4-m col-6-s",
+                                icon: "ui",
+                                text: "ui"
+                            },
+                            {
+                                id: "d",
+                                plan: "col-3 col-4-m col-6-s",
+                                icon: "home",
+                                text: "home"
+                            },
+                            {
+                                id: "e",
+                                plan: "col-6 col-12-s",
+                                icon: "list",
+                                text: "list"
+                            },
+                            {
+                                id: "f",
+                                plan: "col-6 col-12-s",
+                                icon: "data",
+                                text: "data"
+                            },
+                            {
+                                id: "g",
+                                plan: "col-6 col-12-s",
+                                icon: "user",
+                                text: "user"
+                            },
+                            {
+                                id: "h",
+                                plan: "col-6 col-12-s",
+                                icon: "system",
+                                text: "system",
+                            },
+                        ],
+                    },
+                    gap: .5
+                },
+                data_1_1: {
+                    colData: {
+                        items: [
+                            {
+                                id: "a",
+                                icon: "github",
+                                text: "github"
+                            },
+                            {
+                                id: "b",
+                                icon: "download",
+                                text: "download"
+                            },
+                            {
+                                id: "c",
+                                icon: "ui",
+                                text: "ui"
+                            },
+                            {
+                                id: "d",
+                                icon: "home",
+                                text: "home"
+                            },
+                            {
+                                id: "e",
+                                icon: "list",
+                                text: "list"
+                            },
+                            {
+                                id: "f",
+                                icon: "data",
+                                text: "data"
+                            },
+                            {
+                                id: "g",
+                                icon: "user",
+                                text: "user"
+                            },
+                            {
+                                id: "h",
+                                icon: "system",
+                                text: "system",
+                            },
+                        ],
+                        common_plan: "col-3 col-4-m col-6-s"
+                    },
+                    gap: .5
+                },
+
+                data_2: {
+                    colData: {
+                        items: [
+                            {
+                                id: "a",
+                                icon: "github",
+                                text: "github"
+                            },
+                            {
+                                id: "b",
+                                icon: "download",
+                                text: "download"
+                            },
+                            {
+                                id: "c",
+                                icon: "ui",
+                                text: "ui"
+                            },
+                            {
+                                id: "d",
+                                icon: "home",
+                                text: "home"
+                            },
+                            {
+                                id: "e",
+                                icon: "list",
+                                text: "list"
+                            },
+                            {
+                                id: "f",
+                                icon: "data",
+                                text: "data"
+                            },
+                            {
+                                id: "g",
+                                icon: "user",
+                                text: "user"
+                            },
+                            {
+                                id: "h",
+                                icon: "system",
+                                text: "system",
+                            },
+                        ],
+                        common_plan: "col-3 col-4-m col-6-s"
+                    },
+                    gap: .4,
+                    line: ["lgray", 4],
+                    outlineColor: "light"
+                },
+
+            }
+        }
+    }
+</script>