btxui 1.0.1

package/pages/example/base_wid/b_hot_demo.vue

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

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

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

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