btxui 1.0.2 → 1.0.3

package/pages/example/base_wid/b_hot_demo.vue

@@ -1,135 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础按钮-->
-        <section id="sec_1">
-            <h5>基础按钮</h5>
-            <p>可以设计为按钮样式，并通过 <code>@on_click</code> 事件绑定点击回调，此外可以通过 <code>hover</code> 属性设置鼠标悬停样式。</p>
-            <p>
-                <b-hot styles="flex-5 h-3 w-10 bg-color-blue color-light round-sm"
-                       hover="bg-color-red"
-                       @on_click="$_click1">
-                    按钮
-                </b-hot>
-            </p>
-            <p>当前计数：<code>{{data_1}}</code></p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--基础链接-->
-        <section>
-            <h5>基础链接</h5>
-            <p>通过 <code>link</code> 属性可以设置外链或 vue 组件路由；而 <code>forbid</code> 属性则可以禁用链接跳转功能。</p>
-            <p>
-                <b-hot hover="color-blue" link="http://baidu.com">baidu.com</b-hot>
-                <b-hot class="mrg-l-3" hover="color-mgray" link="http://baidu.com" :forbid="true">被禁用的百度链接</b-hot>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--hover 鼠标悬停效果-->
-        <section>
-            <h5>hover 鼠标悬停效果</h5>
-            <p>通过 <code>@on_enter</code> 事件绑定鼠标移入回调；<code>@on_leave</code> 事件绑定鼠标移出回调。</p>
-            <p>
-                <b-hot styles="flex-5 h-3 w-10 bg-color-lgray round-sm"
-                       hover="bg-color-blue color-light"
-                       @on_enter="$_enter3" @on_leave="$_leave3">
-                    {{data_3}}
-                </b-hot>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--内链跳转定位-->
-        <section>
-            <h5>内链跳转定位</h5>
-            <p>通过 <code>link</code> 属性可配置内部链接跳转。其中 <b>chapter_id</b> 字段决定跳转元素位置。<b>chapter_link_data</b> 字段则包含了：ani_speed：平移动画缓动速率、offset：位移偏移、callback：滚动完成回调函数（直接硬跳转无效）。</p>
-            <p class="flex">
-                <b-hot styles="flex-5 h-3 w-14 bg-color-lgray round-sm"
-                       hover="bg-color-blue color-light"
-                       :link="data_4.no_1">
-                    滑至 "基础按钮"
-                </b-hot>
-                <b-hot styles="flex-5 h-3 w-14 bg-color-lgray round-sm mrg-l-1"
-                       hover="bg-color-blue color-light"
-                       :link="data_4.no_2">
-                    跳至 "基础按钮"
-                </b-hot>
-            </p>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import BHot from "@/components/BTXUI/core/b-hot"
-
-    export default {
-        name: "b_hot_demo",
-        components: {
-            HeaderInfo,
-            BHot
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: BHot.name,
-                    ...BHot.introduce,
-                },
-
-                //按钮数据1
-                data_1: 0,
-
-                //按钮数据3
-                data_3: "鼠标移出",
-
-                //按钮数据4
-                data_4: {
-                    no_1: {
-                        chapter_id: "sec_1",
-                        chapter_link_data: {
-                            ani_speed: .3,
-                            offset: -40,
-                            callback: ()=>{
-                                this.$confirm.toast("已滚动至 \"基础按钮\" 位置")
-                            }
-                        }
-                    },
-                    no_2: {
-                        chapter_id: "sec_1",
-                        chapter_link_data: {
-                            ani_speed: 0,
-                        }
-                    },
-                },
-
-            }
-        },
-        methods: {
-
-            //点击按钮1
-            $_click1(){
-                this.data_1++;
-            },
-
-            //鼠标移入按钮3
-            $_enter3(){
-                this.data_3 = "鼠标移入";
-            },
-
-            //鼠标移出按钮3
-            $_leave3(){
-                this.data_3 = "鼠标移出";
-            },
-
-        }
-    }
-</script>

package/pages/example/base_wid/b_icon_demo.vue

@@ -1,80 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--字体图标-->
-        <section>
-            <h5>字体图标</h5>
-            <p>通过 <code>icon</code> 属性即可设置框架预置字体图标，图标字体源来自框架的 css 文件，图标效果可参考 <b>"全局样式 - 图标"</b>。</p>
-            <p>也可以使用自定义字体图标，需要首先引入相应字体图标样式文件，然后设置 <code>styles</code> 属性 <b>font-*</b> 样式值为对应字体名，再通过 <code>icon</code> 属性绑定图标名（图标类名必须符合 <b>ico-name</b> 格式，图标名即 <b>name</b>）即可。</p>
-            <p>系统预置字体图标：</p>
-            <div class="flex-between fsize-2 w-40">
-                <b-icon icon="download" />
-                <b-icon icon="ui" />
-                <b-icon icon="list" />
-                <b-icon icon="system" />
-                <b-icon icon="user" />
-            </div>
-            <p>自定义扩展字体图标：</p>
-            <div class="flex-between fsize-2 w-40">
-                <b-icon styles="font-iconfont" icon="info" />
-                <b-icon styles="font-iconfont" icon="phone" />
-                <b-icon styles="font-iconfont" icon="integral" />
-                <b-icon styles="font-iconfont" icon="assets" />
-                <b-icon styles="font-iconfont" icon="readed" />
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--图片图标-->
-        <section>
-            <h5>图片图标</h5>
-            <p>通过 <code>bgImg</code> 属性即可设置图片图标。</p>
-            <div>
-                <b-icon :bg-img="require('@/assets/img/home_ico.png')"
-                        styles="bg-pos-center w-10 h-5 round-sm line line-lgray thick-1" />
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--css 动画图标-->
-        <section>
-            <h5>css 动画图标</h5>
-            <p>可以使用框架预置的 4 项 css 动画图标（动画机制：html 标签 + css），同样通过 <code>icon</code> 属性进行设置，属性值分别为：<b>ani_success</b>、<b>ani_fail</b>、<b>ani_notic</b>、<b>ani_loading</b>。</p>
-            <div class="flex-between w-40">
-                <b-icon icon="ani_success" />
-                <b-icon icon="ani_fail" />
-                <b-icon icon="ani_notic" />
-                <b-icon icon="ani_loading" />
-            </div>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import BIcon from "@/components/BTXUI/core/b-icon"
-    import "@/assets/custom_fonts/iconfont.css"
-
-    export default {
-        name: "b_icon_demo",
-        components: {
-            HeaderInfo,
-            BIcon
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: BIcon.name,
-                    ...BIcon.introduce,
-                },
-
-            }
-        }
-    }
-</script>

package/pages/example/base_wid/b_img_demo.vue

@@ -1,95 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础使用-->
-        <section>
-            <h5>基础使用</h5>
-            <p>通过 <code>img</code> 属性绑定图像资源即可显示。</p>
-            <p>
-                <b-img v-bind="data_1" />
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--样式使用-->
-        <section>
-            <h5>样式使用</h5>
-            <p>通过 <code>styles</code> 属性可以应用框架封装样式体系。因此可以像添加标签类属性那样进行样式设置。此外独有 <code>objFit</code> 属性用以设置 object-fit 样式。</p>
-            <div class="resize flex pcenter">
-                <div class="mrg-r-1">
-                    <b-img v-bind="data_2.props1" styles="round-sm w-11 h-6" />
-                    <div>fill（默认值）</div>
-                </div>
-                <div class="mrg-r-1">
-                    <b-img v-bind="data_2.props2" styles="round-sm w-11 h-6" />
-                    <div>cover</div>
-                </div>
-                <div class="mrg-r-1">
-                    <b-img v-bind="data_2.props3" styles="round-sm w-11 h-6 bg-color-mgray" />
-                    <div>contain</div>
-                </div>
-                <div class="mrg-r-1">
-                    <b-img v-bind="data_2.props4" styles="round-sm w-11 h-6" />
-                    <div>none</div>
-                </div>
-                <div>
-                    <b-img v-bind="data_2.props5" styles="round-sm w-11 h-6 bg-color-mgray" />
-                    <div>scale-down</div>
-                </div>
-            </div>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import BImg from "@/components/BTXUI/core/b-img"
-
-    export default {
-        name: "b_hot_demo",
-        components: {
-            HeaderInfo,
-            BImg
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: BImg.name,
-                    ...BImg.introduce,
-                },
-
-                data_1: {
-                    img: require('@/assets/img/head.jpg')
-                },
-
-                data_2: {
-                    props1: {
-                        img: require('@/assets/img/head2.jpg')
-                    },
-                    props2: {
-                        img: require('@/assets/img/head2.jpg'),
-                        objFit: "cover"
-                    },
-                    props3: {
-                        img: require('@/assets/img/head2.jpg'),
-                        objFit: "contain"
-                    },
-                    props4: {
-                        img: require('@/assets/img/head2.jpg'),
-                        objFit: "none"
-                    },
-                    props5: {
-                        img: require('@/assets/img/head2.jpg'),
-                        objFit: "scale-down"
-                    }
-                },
-
-            }
-        }
-    }
-</script>

package/pages/example/base_wid/b_input_demo.vue

@@ -1,171 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础输入型表单元素-->
-        <section>
-            <h5>基础输入型表单元素</h5>
-            <p>通过 <code>v-model</code> 可以初始化及双向绑定输入内容。其它属性如：<code>type</code>、<code>name</code>、<code>maxlength</code> 等，在使用上同 input 元素保持一致。</p>
-            <p class="resize">
-                <b-input styles="pad-h-1 h-3 bg-color-lgray line line-#ddd thick-1 round-sm" v-bind="data_1.props" v-model="data_1.val" />
-            </p>
-            <p>当前输入内容：
-                <code v-if="data_1.val">{{data_1.val}}</code>
-                <span v-else class="alpha-d5">暂无内容</span>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--初始化输入内容-->
-        <section>
-            <h5>初始化输入内容</h5>
-            <p class="resize">
-                <b-input styles="pad-h-1 h-3 bg-color-lgray line line-#ddd thick-1 round-sm" v-bind="data_2.props" v-model="data_2.val" />
-            </p>
-            <p>当前输入内容：
-                <code v-if="data_2.val">{{data_2.val}}</code>
-                <span v-else class="alpha-d5">暂无内容</span>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--输入验证-->
-        <section>
-            <h5>输入验证</h5>
-            <p>通过 <code>rule</code> 属性可设置表单项验证，其中 <b>type</b> 字段可以自定义正则验证，也可以使用框架预置的一些常用正则方案，包括：emil：验证邮箱、url：验证网址、tel：验证手机号、uid：验证身份证号、zh：验证中文字符、uname：验证一般账户名，英文、数字、下划线、required：非空验证（英文、数字、下划线、中文、.）。</p>
-            <div class="resize">
-                <p>
-                    <b-input styles="pad-h-1 h-3 bg-color-lgray line line-#ddd thick-1 round-sm"
-                             v-bind="data_3.props"
-                             v-model="data_3.val"
-                             @on_check="$_check3"/>
-                </p>
-            </div>
-            <p>当前输入内容：
-                <code v-if="data_3.final_val">{{data_3.final_val}}</code>
-                <span v-else class="alpha-d5">暂无内容</span>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--激活样式-->
-        <section>
-            <h5>激活样式</h5>
-            <p>通过 <code>focus</code> 属性可设置表单项激活样式值。</p>
-            <p class="resize">
-                <b-input styles="pad-h-1 h-3 bg-color-lgray line line-#ddd thick-1 round-sm" v-bind="data_4.props" v-model="data_4.val" />
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--回车输入-->
-        <section>
-            <h5>回车输入</h5>
-            <p>输入框激活状态时，按下键盘回车键，可触发 <code>on_enter</code> 事件。</p>
-            <p class="resize">
-                <b-input styles="pad-h-1 h-3 bg-color-lgray line line-#ddd thick-1 round-sm"
-                         @on_enter="$_enter5"
-                         v-bind="data_5.props"
-                         v-model="data_5.val" />
-            </p>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import BInput from "@/components/BTXUI/core/b-input"
-    import BtnWid from "@/components/BTXUI/btn/btn-wid"
-
-    export default {
-        name: "b_input_demo",
-        components: {
-            HeaderInfo,
-            BInput,
-            BtnWid
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: BInput.name,
-                    ...BInput.introduce,
-                },
-
-                data_1: {
-                    props: {
-                        type: "text",
-                        name: "uname",
-                        placeholder: "请输入用户名"
-                    },
-                    val: ""
-                },
-
-                data_2: {
-                    props: {
-                        type: "text",
-                        name: "uname",
-                        placeholder: "请输入用户名"
-                    },
-                    val: "neo"
-                },
-
-                data_3: {
-                    props: {
-                        type: "text",
-                        name: "tel",
-                        placeholder: "请输入手机号",
-                        rule: {
-                            type: "tel",
-                            notic: "手机号输入有误!"
-                        }
-                    },
-                    val: "",
-                    final_val: ""
-                },
-
-                data_4: {
-                    props: {
-                        type: "text",
-                        name: "uname",
-                        placeholder: "请输入用户名",
-                        focus: "color-blue bg-color-light"
-                    },
-                    val: "neo"
-                },
-
-                data_5: {
-                    props: {
-                        type: "text",
-                        name: "uname",
-                        placeholder: "请输入用户名",
-                        focus: "color-blue bg-color-light"
-                    },
-                    val: "Lily"
-                },
-
-            }
-        },
-        methods: {
-
-            $_check3(res){
-                if(res.pass){
-                    this.data_3.final_val = this.data_3.val;
-                }else{
-                    this.$confirm.toast(res.notic, 3000, "fail");
-                }
-            },
-
-            $_enter5(text, e){
-                this.$confirm.toast(`当前输入内容：${text}`, 2000)
-            }
-
-        }
-    }
-</script>