btxui 1.0.1

package/pages/example/app_wid/search_wid_demo.vue

@@ -0,0 +1,75 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础搜索框-->
+        <section>
+            <h5>基础搜索框</h5>
+            <div class="resize flex">
+                <search-wid @on_search="(val)=>{data_1.val = val}" />
+            </div>
+            <p>搜索内容：<code>{{data_1.val}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--样式化搜索框-->
+        <section>
+            <h5>样式化搜索框</h5>
+            <p>通过 <code>notic</code> 属性可以设置文本框提示内容；<code>colors</code> 属性可以设置搜索框色彩风格；而 <code>icon</code> 属性则可以设置图标显示位置。</p>
+            <div class="resize flex">
+                <search-wid v-bind="data_2" @on_search="(val)=>{data_2.val = val}" />
+            </div>
+            <p>搜索内容：<code>{{data_2.val}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--搜索提示-->
+        <section>
+            <h5>搜索提示</h5>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import SearchWid from "@/components/BTXUI/search/search-wid"
+
+    export default {
+        name: "search_wid_demo",
+        components: {
+            HeaderInfo,
+            SearchWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: SearchWid.name,
+                    ...SearchWid.introduce,
+                },
+
+                data_1: {
+                    val: "暂无内容"
+                },
+
+                data_2: {
+                    notic: "请输入您的姓名",
+                    icon: "right",
+                    colors: {
+                        text: "light",
+                        bg: "dgray",
+                        line: "dark"
+                    },
+                    val: "暂无内容"
+                },
+
+            }
+        },
+        methods: {
+        }
+    }
+</script>

package/pages/example/app_wid/select_wid_demo.vue

@@ -0,0 +1,217 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础下拉框-->
+        <section>
+            <h5>基础下拉框</h5>
+            <p>通过 <code>placeholder</code> 属性可以设置提示文字。</p>
+            <div class="resize w-15">
+                <select-wid v-bind="data_1.props" v-model="data_1.selected" />
+            </div>
+            <p>所选项：
+                <code v-if="data_1.selected">{{data_1.selected}}</code>
+                <span v-else class="alpha-d5">暂无选择</span>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--默认下拉项-->
+        <section>
+            <h5>默认下拉项</h5>
+            <p>通过 <code>v-model</code> 可以初始化及双向绑定下拉所选项。</p>
+            <div class="resize w-15">
+                <select-wid v-bind="data_2.props" v-model="data_2.selected" />
+            </div>
+            <p>所选项：<code>{{data_2.selected}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--下拉选项最大显示行数-->
+        <section>
+            <h5>下拉选项最大显示行数</h5>
+            <p>通过 <code>rows</code> 属性可以设置下拉选项最大显示行数。当总数据项不足最大行数时会保持默认行数。</p>
+            <div class="resize flex">
+                <div class="w-15">
+                    <select-wid v-bind="data_3.props1" v-model="data_3.selected1" />
+                </div>
+                <div class="w-15 mrg-l-2">
+                    <select-wid v-bind="data_3.props2" v-model="data_3.selected2" />
+                </div>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义颜色-->
+        <section>
+            <h5>自定义颜色</h5>
+            <p>通过 <code>colors</code> 属性可以设置下拉列表的背景及文字颜色。</p>
+            <div class="resize flex">
+                <div class="w-15">
+                    <select-wid v-bind="data_4.props" v-model="data_4.selected" />
+                </div>
+            </div>
+            <p></p>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import SelectWid from "@/components/BTXUI/select/select-wid"
+
+    export default {
+        name: "select_wid_demo",
+        components: {
+            HeaderInfo,
+            SelectWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: SelectWid.name,
+                    ...SelectWid.introduce,
+                },
+
+                data_1: {
+                    props: {
+                        listData: [
+                            {
+                                text: "html + css",
+                                val: "html&css",
+                            },
+                            {
+                                text: "javascript",
+                                val: "js",
+                            }
+                        ],
+                        placeholder: "请选择相关技术"
+                    },
+                    selected: ""
+                },
+
+                data_2: {
+                    props: {
+                        listData: [
+                            {
+                                text: "html + css",
+                                val: "html&css",
+                            },
+                            {
+                                text: "javascript",
+                                val: "js",
+                            },
+                            {
+                                text: "vue3.0",
+                                val: "vue",
+                            }
+                        ],
+                        placeholder: "请选择相关技术"
+                    },
+                    selected: "js"
+                },
+
+                data_3: {
+                    props1: {
+                        listData: [
+                            {
+                                text: "html + css",
+                                val: "html&css",
+                            },
+                            {
+                                text: "javascript",
+                                val: "js",
+                            },
+                            {
+                                text: "vue",
+                                val: "vue",
+                            },
+                            {
+                                text: "react",
+                                val: "react",
+                            },
+                            {
+                                text: "nodejs",
+                                val: "nodejs",
+                            },
+                            {
+                                text: "webpack",
+                                val: "webpack",
+                            },
+                            {
+                                text: "typescript",
+                                val: "typescript",
+                            },
+                            {
+                                text: "php",
+                                val: "php",
+                            },
+                            {
+                                text: "c#",
+                                val: "c#",
+                            }
+                        ],
+                        rows: 3,
+                        placeholder: "请选择相关技术"
+                    },
+                    props2: {
+                        listData: [
+                            {
+                                text: "html + css",
+                                val: "html&css",
+                            }
+                        ],
+                        rows: 3,
+                        placeholder: "请选择相关技术"
+                    },
+                    selected1: "php",
+                    selected2: ""
+                },
+
+                data_4: {
+                    props: {
+                        listData: [
+                            {
+                                text: "html + css",
+                                val: "html&css",
+                            },
+                            {
+                                text: "javascript",
+                                val: "js",
+                            },
+                            {
+                                text: "php",
+                                val: "php",
+                            }
+                        ],
+                        rows: 3,
+                        placeholder: "请选择相关技术",
+                        colors: {
+                            text: "blue",
+                            normal: {
+                                text: "sub",
+                                bg: "dgray"
+                            },
+                            hover: {
+                                text: "sub",
+                                bg: "dark"
+                            },
+                            act: {
+                                text: "dark",
+                                bg: "sub"
+                            }
+                        }
+                    },
+                    selected: ""
+                }
+
+            }
+        }
+    }
+</script>

package/pages/example/app_wid/slider_wid_demo.vue

@@ -0,0 +1,143 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>通过 <code>pages</code> 属性配置好页面数据，再通过插槽形式插入对应页面内容即可使用。<code>view</code> 属性可以设置页面高度及背景色。<code>showDot</code> 属性可以显示轮播点（轮播点支持点击分页）。<code>showFlipBtn</code> 属性则可以显示默认分页按钮。<code>autoPlayDuration</code> 属性可以设置自动播放时间间隔（单位毫秒）。<code>loop</code> 属性可以设置是否循环播放。<code>keyboardFlip</code> 属性可以启动键盘左右分页功能（注：同一页面仅限单个实例使用）。</p>
+            <div class="resize">
+                <slider-wid v-bind="data_1">
+                    <div v-for="page of data_1.pages" :key="page.id" :slot="page.id"
+                         class="pad-t-4 pcenter fsize-1d4 alpha-d7" v-html="page.text">
+                    </div>
+                </slider-wid>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--外部操作-->
+        <section>
+            <h5>外部操作</h5>
+            <p>通过 <code>next、prev、flip</code> API 方法可以实现组件的外部分页操作，当 <b>flip_ani</b> 参数为 false 时则为硬切换。<code>auto_play、stop_auto_play</code> 方法则可以控制自动播放效果。通过 <code>on_flip</code> 事件可以在回调函数中获取当前分页页码 <b>cur_page</b>。</p>
+            <div class="resize">
+                <slider-wid v-bind="data_2.props" ref="slider2" @on_flip="$_show_page2">
+                    <div v-for="page of data_2.props.pages" :key="page.id" :slot="page.id"
+                         class="pad-t-4 pcenter fsize-1d4 alpha-d7" v-html="page.text">
+                    </div>
+                </slider-wid>
+                <div class="flex-between w-40 mrg-v-1">
+                    <btn-wid btnText="Prev" @on_click="$_prev2" />
+                    <btn-wid btnText="Next" @on_click="$_next2" />
+                    <btn-wid btnText="Page 3" @on_click="$_flip2(3)" />
+                    <btn-wid btnText="停止自动播放" @on_click="$_stop2" />
+                    <btn-wid btnText="继续自动播放" @on_click="$_play2" />
+                </div>
+                <div>当前页码：<code>{{data_2.cur_page}}</code></div>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import SliderWid from "@/components/BTXUI/slider/slider-wid"
+    import BtnWid from "@/components/BTXUI/btn/btn-wid"
+
+    export default {
+        name: "slider_wid_demo",
+        components: {
+            HeaderInfo,
+            SliderWid,
+            BtnWid
+        },
+        data(){
+            const pages = [
+                { id: "a", text: "javascript" },
+                { id: "b", text: "css<br>Cascading Style Sheets<br>层叠样式表" },
+                { id: "c", text: "php" }
+            ];
+
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: SliderWid.name,
+                    ...SliderWid.introduce,
+                },
+
+                data_1: {
+                    pages,
+                    view: {
+                        height: 17,
+                        bg_color: "lgray"
+                    },
+                    showDot: {
+                        bottom: 2,
+                        color: "yellow",
+                        act_color: "blue"
+                    },
+                    showFlipBtn: true,
+                    autoPlayDuration: 3000,
+                    loop: true,
+                    keyboardFlip: true
+                },
+
+                data_2: {
+                    props: {
+                        pages,
+                        view: {
+                            height: 17,
+                            bg_color: "lgray"
+                        },
+                        showDot: {
+                            bottom: 2,
+                            color: "yellow",
+                            act_color: "blue"
+                        },
+                        autoPlayDuration: 3000,
+                        loop: true
+                    },
+                    cur_page: 1
+                },
+
+            }
+        },
+        computed: {
+
+            slider2(){
+                return this.$refs.slider2;
+            }
+
+        },
+        methods: {
+
+            $_prev2(){
+                this.slider2.prev();
+            },
+
+            $_next2(){
+                this.slider2.next(false); //硬切换
+            },
+
+            $_flip2(page){
+                this.slider2.flip(3, false); //硬切换
+            },
+
+            $_show_page2(page){
+                this.data_2.cur_page = page;
+            },
+
+            $_stop2(){
+                this.slider2.stop_auto_play();
+            },
+
+            $_play2(){
+                this.slider2.auto_play();
+            }
+
+        }
+    }
+</script>

package/pages/example/app_wid/tab_wid_demo.vue

@@ -0,0 +1,170 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--选项卡切换使用-->
+        <section>
+            <h5>选项卡切换使用</h5>
+            <p>通过 v-model 绑定响应式数据。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tab-wid v-bind="data_1.props" v-model="data_1.cur_tab">
+                    <div class="h-10 bg-color-light round-b round-sm shadow-sm color-neutral pad-2" :slot="item.id" v-for="item of data_1.props.tagsData.tagList" :key="item.id">
+                        <span class="color-mgray">{{data_1.content[item.id]}}</span>
+                    </div>
+                </tab-wid>
+            </div>
+            <p>当前所选数据：<code>{{data_1.cur_tab}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义颜色方案-->
+        <section>
+            <h5>自定义颜色方案</h5>
+            <p>通过 <code>colors</code> 字段可以配置标签色彩体系。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tab-wid v-bind="data_2.props" v-model="data_2.cur_tab">
+                    <div class="h-10 bg-color-light round-b round-sm shadow-sm color-neutral pad-2" :slot="item.id" v-for="item of data_2.props.tagsData.tagList" :key="item.id">
+                        <span class="color-mgray">{{data_2.content[item.id]}}</span>
+                    </div>
+                </tab-wid>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--滑动切换-->
+        <section>
+            <h5>滑动切换</h5>
+            <p>通过 <code>smooth</code> 字段可以设置内容滑动切换效果。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tab-wid v-bind="data_3.props" v-model="data_3.cur_tab">
+                    <div class="h-10 bg-color-light round-b round-sm shadow-sm color-neutral pad-2" :slot="item.id" v-for="item of data_3.props.tagsData.tagList" :key="item.id">
+                        <span class="color-mgray">{{data_3.content[item.id]}}</span>
+                    </div>
+                </tab-wid>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import TabWid from "@/components/BTXUI/tab/tab-wid"
+
+    export default {
+        name: "tab_wid_demo",
+        components: {
+            HeaderInfo,
+            TabWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: TabWid.name,
+                    ...TabWid.introduce,
+                },
+
+                data_1: {
+                    props: {
+                        tagsData: {
+                            tagList: [
+                                {
+                                    id: "html",
+                                    text: "html"
+                                },
+                                {
+                                    id: "css",
+                                    text: "css"
+                                },
+                                {
+                                    id: "javascript",
+                                    text: "javascript"
+                                },
+                            ],
+                        }
+                    },
+                    cur_tab: "html",
+                    content: {
+                        html: "html 是用于网页布局的标记语言",
+                        css: "css 是用于网页样式的语言",
+                        javascript: "javascript 是用于网页交互行为的脚本语言"
+                    }
+                },
+
+                data_2: {
+                    props: {
+                        tagsData: {
+                            tagList: [
+                                {
+                                    id: "html",
+                                    text: "html"
+                                },
+                                {
+                                    id: "css",
+                                    text: "css"
+                                },
+                                {
+                                    id: "javascript",
+                                    text: "javascript"
+                                },
+                            ],
+                            colors: {
+                                normal: {
+                                    text: "light",
+                                    bg: "#444",
+                                },
+                                hover: {
+                                    text: "mgray",
+                                    bg: "#333",
+                                },
+                                act: {
+                                    text: "blue",
+                                    bg: "light",
+                                },
+                            }
+                        }
+                    },
+                    cur_tab: "css",
+                    content: {
+                        html: "html 是用于网页布局的标记语言",
+                        css: "css 是用于网页样式的语言",
+                        javascript: "javascript 是用于网页交互行为的脚本语言"
+                    }
+                },
+
+                data_3: {
+                    props: {
+                        tagsData: {
+                            tagList: [
+                                {
+                                    id: "html",
+                                    text: "html"
+                                },
+                                {
+                                    id: "css",
+                                    text: "css"
+                                },
+                                {
+                                    id: "javascript",
+                                    text: "javascript"
+                                },
+                            ]
+                        },
+                        smooth: true
+                    },
+                    cur_tab: "css",
+                    content: {
+                        html: "html 是用于网页布局的标记语言",
+                        css: "css 是用于网页样式的语言",
+                        javascript: "javascript 是用于网页交互行为的脚本语言"
+                    }
+                }
+
+            }
+        }
+    }
+</script>