btxui 1.0.2 → 1.0.3

package/pages/example/app_wid/carousel_wid_demo.vue

@@ -1,152 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础使用-->
-        <section>
-            <h5>基础使用</h5>
-            <p>通过 <code>items</code> 属性可以配置走马灯的播放内容；<code>visiableCount</code> 属性可设置显示内容数目；<code>rule</code> 属性可设置内容间隔；<code>speed</code> 属性可设置播放速率。</p>
-            <div>
-                <carousel-wid v-bind="data_1">
-                    <div :slot="item.id" :key="item.id" v-for="item of data_1.items"
-                         :class="`flex-5 round-sm bg-color-${item.color} h-10`">
-                        {{item.text}}
-                    </div>
-                </carousel-wid>
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--外部控制-->
-        <section>
-            <h5>外部控制</h5>
-            <p>通过 API <code>play</code> 和 <code>pause</code> 方法可以实现走马灯的外部控制。</p>
-            <div>
-                <carousel-wid v-bind="data_2" ref="carousel">
-                    <div :slot="item.id" :key="item.id" v-for="item of data_1.items"
-                         :class="`flex-5 bg-color-lgray h-10 line line-neutral thick-1`">
-                        {{item.text}}
-                    </div>
-                </carousel-wid>
-            </div>
-            <div class="flex mrg-t-1">
-                <tag-wid @on_click="$_toggle_state" v-bind="data_2.tag_data" v-model="data_2.enable" />
-            </div>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import CarouselWid from "@/components/BTXUI/carousel/carousel-wid"
-    import tagWid from "@/components/BTXUI/tag/tag-wid"
-
-    export default {
-        name: "carousel_wid_demo",
-        components: {
-            HeaderInfo,
-            CarouselWid,
-            tagWid
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: CarouselWid.name,
-                    ...CarouselWid.introduce,
-                },
-
-                data_1: {
-                    items: [
-                        {
-                            id: "a",
-                            text: "Html",
-                            color: "red"
-                        },
-                        {
-                            id: "b",
-                            text: "Css",
-                            color: "blue"
-                        },
-                        {
-                            id: "c",
-                            text: "Javascript",
-                            color: "green"
-                        },
-                        {
-                            id: "d",
-                            text: "Php",
-                            color: "yellow"
-                        },
-                        {
-                            id: "e",
-                            text: "Typescript",
-                            color: "lgray"
-                        }
-                    ],
-                    visiableCount: 4,
-                    rule: 6,
-                    speed: 2
-                },
-
-                data_2: {
-                    items: [
-                        {
-                            id: "a",
-                            text: "Html",
-                            color: "red"
-                        },
-                        {
-                            id: "b",
-                            text: "Css",
-                            color: "blue"
-                        },
-                        {
-                            id: "c",
-                            text: "Javascript",
-                            color: "green"
-                        },
-                        {
-                            id: "d",
-                            text: "Php",
-                            color: "yellow"
-                        },
-                        {
-                            id: "e",
-                            text: "Typescript",
-                            color: "lgray"
-                        }
-                    ],
-                    tag_data: {
-                        id: "data_2",
-                        text: "暂停",
-                        actText: "播放",
-                        colors: {
-                            normal: {
-                                text: "dgray",
-                                bg: "lgray"
-                            },
-                            hover: {
-                                text: "dgray",
-                                bg: "#ddd",
-                            }
-                        },
-                        mode: "checkbox"
-                    },
-                    enable: false
-                }
-
-            }
-        },
-        methods: {
-
-            $_toggle_state(){
-                this.$refs.carousel[this.data_2.enable? "pause": "play"]();
-            }
-
-        }
-    }
-</script>

package/pages/example/app_wid/checkbox_wid_demo.vue

@@ -1,65 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础使用-->
-        <section>
-            <h5>基础使用</h5>
-            <div class="resize flex bg-color-lgray pad-v-1 pad-h-2 round-sm">
-                <checkbox-wid v-bind="data_1.props" v-model="data_1.selected" />
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--纯复选框使用-->
-        <section>
-            <h5>纯复选框使用</h5>
-            <p><code>text</code> 属性可缺省，显示为纯复选框。</p>
-            <div class="resize flex bg-color-lgray pad-v-1 pad-h-2 round-sm">
-                <checkbox-wid v-bind="data_2.props" v-model="data_2.selected" />
-            </div>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import CheckboxWid from "@/components/BTXUI/checkbox/checkbox-wid"
-
-    export default {
-        name: "checkbox_wid_demo",
-        components: {
-            HeaderInfo,
-            CheckboxWid
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: CheckboxWid.name,
-                    ...CheckboxWid.introduce,
-                },
-
-                data_1: {
-                    props: {
-                        id: "a",
-                        text: "编辑模式",
-                        actText: "退出编辑"
-                    },
-                    selected: false
-                },
-
-                data_2: {
-                    props: {
-                        id: "b"
-                    },
-                    selected: false
-                }
-
-            }
-        }
-    }
-</script>

package/pages/example/app_wid/confirm_wid_demo.vue

@@ -1,197 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--toast 弹窗-->
-        <section>
-            <h5>toast 弹窗</h5>
-            <p>使用 toast 方法开启提示弹窗，参数 <code>duration</code> 可设置弹窗持续显示时间；<code>state</code> 可设置弹窗状态图标，其中：success 成功、fail 失败、notic 提示，为动态图标。</p>
-            <div class="resize flex">
-                <div class="mrg-r-1">
-                    <btn-wid @on_click="$_show_pannel1" btnText="显示 toast 弹窗" />
-                </div>
-                <div class="mrg-r-1">
-                    <btn-wid @on_click="$_show_pannel1_fail" btnText="fail 弹窗" />
-                </div>
-                <div class="mrg-r-1">
-                    <btn-wid @on_click="$_show_pannel1_success" btnText="success 弹窗" />
-                </div>
-                <btn-wid @on_click="$_show_pannel1_notic" btnText="notic 弹窗" />
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--alert 弹窗-->
-        <section>
-            <h5>alert 弹窗</h5>
-            <p>使用 alert 方法开启警示弹窗，参数 <code>btn_cname</code> 可设置按钮文字，且支持键盘"回车"触发按钮。</p>
-            <div class="resize flex">
-                <btn-wid @on_click="$_show_pannel2" btnText="显示 alert 弹窗" />
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--confirm 弹窗-->
-        <section>
-            <h5>confirm 弹窗</h5>
-            <p>使用 confirm 方法开启确认弹窗，参数 <code>success</code> 可设置确认回调（支持键盘"回车"触发）；<code>error</code> 可设置取消回调。</p>
-            <div class="resize flex">
-                <btn-wid @on_click="$_show_pannel3" btnText="显示 confirm 弹窗" />
-            </div>
-            <p>下一步操作：<span :class="data_3? 'color-green': 'color-red'">{{data_3? '已获取通讯录权限': '未获取权限'}}</span></p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--prograss 弹窗-->
-        <section>
-            <h5>prograss 弹窗</h5>
-            <p>使用 prograss 方法开启加载弹窗，参数 <code>result</code> 可设置加载结束弹窗状态图标（success 成功、fail 失败），若为 true 则会执行关闭。</p>
-            <div class="resize flex">
-                <div class="mrg-r-1">
-                    <btn-wid @on_click="$_show_pannel4_success" btnText="prograss 弹窗 3 秒加载成功" />
-                </div>
-                <btn-wid @on_click="$_show_pannel4_fail" btnText="prograss 弹窗 3 秒加载失败" />
-            </div>
-            <p>加载状态：<span :class="`color-${data_4.color}`">{{data_4.text}}</span></p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--prograss 弹窗显示实时加载进度-->
-        <section>
-            <h5>prograss 弹窗显示实时加载进度</h5>
-            <p>可多次执行 prograss 方法修改其中 text 信息以显示实时加载进度。</p>
-            <div class="resize flex">
-                <btn-wid @on_click="$_show_pannel5" btnText="开始加载" />
-            </div>
-            <p>加载状态：<span :class="data_5 === '加载完成!'? 'color-green': ''">{{data_5}}</span></p>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import BtnWid from "@/components/BTXUI/btn/btn-wid"
-    import ConfirmWid from "@/components/BTXUI/confirm/confirm-wid"
-
-    export default {
-        name: "confirm_wid_demo",
-        components: {
-            HeaderInfo,
-            BtnWid
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: ConfirmWid.name,
-                    ...ConfirmWid.introduce,
-                },
-
-                //数据3
-                data_3: false,
-
-                //数据4
-                data_4: {
-                    color: "",
-                    text: "尚未加载"
-                },
-
-                //数据5
-                data_5: "尚未加载"
-
-            }
-        },
-        methods: {
-
-            //显示面板1
-            $_show_pannel1(){
-                this.$confirm.toast("hello javascript", 3000)
-            },
-
-            //显示面板1 - fail 状态
-            $_show_pannel1_fail(){
-                this.$confirm.toast("this operate is fail", 3000, "fail")
-            },
-
-            //显示面板1 - success 状态
-            $_show_pannel1_success(){
-                this.$confirm.toast("this operate is success", 3000, "success")
-            },
-
-            //显示面板1 - notic 状态
-            $_show_pannel1_notic(){
-                this.$confirm.toast("this operate has done", 3000, "notic")
-            },
-
-            //显示面板2
-            $_show_pannel2(){
-                this.$confirm.alert("当前应用已获取您的本地定位!", "success", "已知晓")
-            },
-
-            //显示面板3
-            $_show_pannel3(){
-                this.$confirm.confirm("当前应用需要获取您的手机通讯录<br>是否同意?", ()=>{
-                    this.data_3 = true;
-                }, ()=>{
-                    this.data_3 = false;
-                })
-            },
-
-            //显示面板4 - success 状态
-            $_show_pannel4_success(){
-                this.$confirm.prograss("页面获取中!");
-                this.data_4 = {
-                    text: "加载中...",
-                    color: "dgray"
-                };
-                setTimeout(()=>{
-                    this.$confirm.prograss("页面获取成功!", "success");
-                    this.data_4 = {
-                        text: "加载成功!",
-                        color: "green"
-                    };
-                }, 3000)
-            },
-
-            //显示面板4 - fail 状态
-            $_show_pannel4_fail(){
-                this.$confirm.prograss("页面获取中!");
-                this.data_4 = {
-                    text: "加载中...",
-                    color: "dgray"
-                };
-                setTimeout(()=>{
-                    this.$confirm.prograss("页面获取失败!", "fail");
-                    this.data_4 = {
-                        text: "加载失败!",
-                        color: "red"
-                    };
-                }, 3000)
-            },
-
-            //显示面板5
-            $_show_pannel5(){
-                this.$confirm.prograss("加载进度 0%");
-                this.data_5 = "加载中...";
-                let prograss = 0,
-                    t = setInterval(()=>{
-                        prograss += 10;
-                        if(prograss === 100){
-                            this.$confirm.prograss("数据获取完成!", "success");
-                            this.data_5 = "加载完成!";
-                            clearInterval(t);
-                        }else{
-                            this.$confirm.prograss(`加载进度 ${prograss}%`);
-                        }
-                    }, 1000)
-            },
-
-        }
-    }
-</script>