btxui 1.0.2 → 1.0.5

package/pages/example/app_wid/search_wid_demo.vue

@@ -1,75 +0,0 @@
-<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

@@ -1,217 +0,0 @@
-<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

@@ -1,143 +0,0 @@
-<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

@@ -1,170 +0,0 @@
-<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>