btxui 1.0.1

package/pages/example/app_wid/imgs_upload_wid_demo.vue

@@ -0,0 +1,159 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>默认为单图上传，通过 <code>width</code>、<code>height</code> 属性可以设置预览图尺寸，默认为 8 * 5 rem。<code>notic</code> 属性可以设置上传提示文字。</p>
+            <p>测试接口：<span class="alpha-d7 color-blue">{{upload_api}}</span></p>
+            <div class="resize">
+                <imgs-upload-wid v-bind="data_1.props" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--初始化默认封面-->
+        <section>
+            <h5>初始化默认封面</h5>
+            <p>通过 <code>v-model</code> 可以初始化及双向绑定上传图片内容。</p>
+            <div class="resize">
+                <imgs-upload-wid v-bind="data_2.props" v-model="data_2.remote_file" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--多图上传-->
+        <section>
+            <h5>多图上传</h5>
+            <p>通过开启 <code>multiple</code> 属性可以设置多图上传。</p>
+            <div class="resize">
+                <imgs-upload-wid v-bind="data_3.props"/>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--初始化默认多封面-->
+        <section>
+            <h5>初始化默认多封面</h5>
+            <div class="resize">
+                <imgs-upload-wid v-bind="data_4.props" v-model="data_4.remote_files" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--单图上传预览-->
+        <section>
+            <h5>单图上传预览</h5>
+            <p>设置后续上传时，且关闭 <code>multiple</code> 属性，可进行单张图片上传前预览。</p>
+            <div class="resize">
+                <imgs-upload-wid v-bind="data_5.props" v-model="data_5.remote_files" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--多图上传预览-->
+        <section>
+            <h5>多图上传预览</h5>
+            <p>设置后续上传时，且开启 <code>multiple</code> 属性，可进行多张图片上传前预览。</p>
+            <div class="resize">
+                <imgs-upload-wid v-bind="data_6.props" v-model="data_6.remote_files" />
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import ImgsUploadWid from "@/components/BTXUI/imgsUpload/imgs-upload-wid"
+    import server from "@/assets/server.js"
+
+    const uploadApi = server.apis.upload;
+
+    export default {
+        name: "imgs_upload_wid_demo",
+        components: {
+            HeaderInfo,
+            ImgsUploadWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: ImgsUploadWid.name,
+                    ...ImgsUploadWid.introduce,
+                },
+
+                //服务接口
+                upload_api: uploadApi,
+
+                data_1: {
+                    props: {
+                        uploadApi,
+                        width: 16,
+                        height: 9,
+                        notic: "要求尺寸：160 * 90"
+                    }
+                },
+
+                data_2: {
+                    props: {
+                        uploadApi,
+                        width: 10,
+                        height: 7
+                    },
+                    remote_file: ["http://localhost/BTXphp/sea/static/img/test/test.jpg"]
+                },
+
+                data_3: {
+                    props: {
+                        uploadApi,
+                        width: 10,
+                        height: 7,
+                        multiple: true
+                    }
+                },
+
+                data_4: {
+                    props: {
+                        uploadApi,
+                        width: 10,
+                        height: 7,
+                        multiple: true
+                    },
+                    remote_files: [
+                        "http://localhost/BTXphp/sea/static/img/test/test.jpg",
+                        "http://localhost/BTXphp/sea/static/img/test/test_1.jpg"
+                    ]
+                },
+
+                data_5: {
+                    props: {
+                        width: 10,
+                        height: 7
+                    },
+                    remote_files: [
+                        "http://localhost/BTXphp/sea/static/img/test/test.jpg"
+                    ]
+                },
+
+                data_6: {
+                    props: {
+                        width: 10,
+                        height: 7,
+                        multiple: true
+                    },
+                    remote_files: []
+                }
+
+            }
+        }
+    }
+</script>

package/pages/example/app_wid/index.js

@@ -0,0 +1,158 @@
+//功能组件
+import content_wid_demo from './content_wid_demo'
+import tag_wid_demo from './tag_wid_demo'
+import tags_wid_demo from './tags_wid_demo'
+import checkbox_wid_demo from './checkbox_wid_demo'
+import carousel_wid_demo from './carousel_wid_demo'
+import tab_wid_demo from './tab_wid_demo'
+import page_flip_wid_demo from './page_flip_wid_demo'
+import pannel_wid_demo from './pannel_wid_demo'
+import form_pannel_wid_demo from './form_pannel_wid_demo'
+import form_wid_demo from './form_wid_demo'
+import btn_wid_demo from './btn_wid_demo'
+import search_wid_demo from './search_wid_demo'
+import confirm_wid_demo from './confirm_wid_demo'
+import table_wid_demo from './table_wid_demo'
+import select_wid_demo from './select_wid_demo'
+import range_wid_demo from './range_wid_demo'
+import upload_wid_demo from './upload_wid_demo'
+import imgs_upload_wid_demo from './imgs_upload_wid_demo'
+import slider_wid_demo from './slider_wid_demo'
+import drawer_wid_demo from './drawer_wid_demo'
+import tooltip_wid_demo from './tooltip_wid_demo'
+import app_wid_demo from './app_wid_demo'
+import app_wid_data_demo from './app/data_demo'
+import app_wid_download_demo from './app/download_demo'
+import app_wid_list_demo from './app/list_demo'
+import app_wid_system_demo from './app/system_demo'
+
+export default [
+    {
+        path: '/app_wid_demo',
+        component: app_wid_demo,
+        children: [
+            {
+                path: 'data',
+                component: app_wid_data_demo
+            },
+            {
+                path: 'download',
+                component: app_wid_download_demo
+            },
+            {
+                path: 'list',
+                component: app_wid_list_demo
+            },
+            {
+                path: 'system',
+                component: app_wid_system_demo
+            }
+        ],
+        text: "<b>app-wid</b> app 基础布局"
+    },
+    {
+        path: '/btn_wid_demo',
+        component: btn_wid_demo,
+        text: "<b>btn-wid</b> 基础按钮"
+    },
+    {
+        path: '/checkbox_wid_demo',
+        component: checkbox_wid_demo,
+        text: "<b>checkbox-wid</b> 复选框"
+    },
+    {
+        path: '/carousel_wid_demo',
+        component: carousel_wid_demo,
+        text: "<b>carousel-wid</b> 走马灯"
+    },
+    {
+        path: '/confirm_wid_demo',
+        component: confirm_wid_demo,
+        text: "<b>confirm-wid</b> 确认弹窗"
+    },
+    {
+        path: '/content_wid_demo',
+        component: content_wid_demo,
+        text: "<b>content-wid</b> 树形目录"
+    },
+    {
+        path: '/drawer_wid_demo',
+        component: drawer_wid_demo,
+        text: "<b>drawer-wid</b> 抽屉折叠"
+    },
+    {
+        path: '/form_wid_demo',
+        component: form_wid_demo,
+        text: "<b>form-wid</b> 表单"
+    },
+    {
+        path: '/form_pannel_wid_demo',
+        component: form_pannel_wid_demo,
+        text: "<b>form-pannel-wid</b> 浮动表单面板"
+    },
+    {
+        path: '/imgs_upload_wid_demo',
+        component: imgs_upload_wid_demo,
+        text: "<b>imgs-upload-wid</b> 图片上传"
+    },
+    {
+        path: '/pannel_wid_demo',
+        component: pannel_wid_demo,
+        text: "<b>pannel-wid</b> 浮动面板"
+    },
+    {
+        path: '/page_flip_wid_demo',
+        component: page_flip_wid_demo,
+        text: "<b>page-flip-wid</b> 分页导航"
+    },
+    {
+        path: '/range_wid_demo',
+        component: range_wid_demo,
+        text: "<b>range-wid</b> 范围选择"
+    },
+    {
+        path: '/select_wid_demo',
+        component: select_wid_demo,
+        text: "<b>select-wid</b> 下拉选择"
+    },
+    {
+        path: '/slider_wid_demo',
+        component: slider_wid_demo,
+        text: "<b>slider-wid</b> 轮播器"
+    },
+    {
+        path: '/search_wid_demo',
+        component: search_wid_demo,
+        text: "<b>search-wid</b> 搜索栏"
+    },
+    {
+        path: '/table_wid_demo',
+        component: table_wid_demo,
+        text: "<b>table-wid</b> 表格"
+    },
+    {
+        path: '/tag_wid_demo',
+        component: tag_wid_demo,
+        text: "<b>tag-wid</b> 标签"
+    },
+    {
+        path: '/tags_wid_demo',
+        component: tags_wid_demo,
+        text: "<b>tags-wid</b> 标签组"
+    },
+    {
+        path: '/tab_wid_demo',
+        component: tab_wid_demo,
+        text: "<b>tab-wid</b> 标签切换"
+    },
+    {
+        path: '/tooltip_wid_demo',
+        component: tooltip_wid_demo,
+        text: "<b>tooltip-wid</b> 悬浮提示"
+    },
+    {
+        path: '/upload_wid_demo',
+        component: upload_wid_demo,
+        text: "<b>upload-wid</b> 文件上传"
+    },
+]

package/pages/example/app_wid/page_flip_wid_demo.vue

@@ -0,0 +1,99 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>组件会基于 <code>total</code> 总页数、<code>curPage</code> 当前页、<code>limit</code> 页码显示限制属性，自动进行分页导航布局。</p>
+            <p>通过 API <code>on_flip</code> 事件则可以获取当前页码。</p>
+            <p>【exp】total: 8、curPage: 2、limit: 3 demo 效果：</p>
+            <div class="resize bg-color-lgray pad-1 round-sm">
+                <page-flip-wid v-bind="data_1.props" @on_flip="$_show_page1" />
+            </div>
+            <p>当前页码：<code>{{data_1.cur_page}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--风格化-->
+        <section>
+            <h5>风格化</h5>
+            <p>组件 <code>colors</code> 属性可设置组件按钮风格化样式。</p>
+            <div class="resize bg-color-dark pad-1 round-sm">
+                <page-flip-wid v-bind="data_2.props" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--水平对齐-->
+        <section>
+            <h5>水平对齐</h5>
+            <p>组件 <code>align</code> 属性可设置组件水平对齐方式，包括：left、center（默认）、right。</p>
+            <div class="resize bg-color-lgray pad-1 round-sm">
+                <page-flip-wid v-bind="data_3.props" />
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import PageFlipWid from "@/components/BTXUI/pageFlip/page-flip-wid"
+
+    export default {
+        name: "range_wid_demo",
+        components: {
+            HeaderInfo,
+            PageFlipWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: PageFlipWid.name,
+                    ...PageFlipWid.introduce,
+                },
+
+                data_1: {
+                    props: {
+                        total: 8,
+                        curPage: 2,
+                        limit: 3
+                    },
+                    cur_page: 2
+                },
+
+                data_2: {
+                    props: {
+                        total: 4,
+                        colors: {
+                            bg: "blue",
+                            text: "#fff",
+                            hover: "green",
+                            act: "green"
+                        }
+                    }
+                },
+
+                data_3: {
+                    props: {
+                        total: 4,
+                        align: "left"
+                    }
+                },
+
+            }
+        },
+        methods: {
+
+            $_show_page1(page){
+                this.data_1.cur_page = page;
+            }
+
+        }
+    }
+</script>

package/pages/example/app_wid/pannel_wid_demo.vue

@@ -0,0 +1,177 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础自定义弹窗使用-->
+        <section>
+            <h5>基础自定义弹窗使用</h5>
+            <p>默认为居中弹出效果，且没有遮罩背景。</p>
+            <p class="flex resize">
+                <btn-wid btnText="切换弹窗" @on_click="data_1.visible = !data_1.visible" />
+                <pannel-wid v-model="data_1.visible">
+                    <div class="color-mgray pcenter pad-2 w-20 round-md bg-color-light line thick-1 line-mgray shadow-sm">
+                        <span class="color-blue">html + css</span>
+                    </div>
+                </pannel-wid>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--弹窗遮罩-->
+        <section>
+            <h5>弹窗遮罩</h5>
+            <p>可以启用 <code>matte</code> 属性来设置面板遮罩背景，默认为透明色，z 轴层级为 9。可以通过 <code>matte-color</code> 属性设置遮罩颜色，<code>matte-pattern</code> 属性设置遮罩图案，以及 <code>matte-z-index</code> 属性设置遮罩 z 轴层级。此外可以通过 <code>close-btn</code> 属性启用关闭按钮，或通过 <code>matte-close</code> 属性设置 "click" 或 "dblclick" 启用遮罩自身单击或双击关闭效果。</p>
+            <p class="flex resize">
+                <btn-wid btnText="显示弹窗" @on_click="data_2.visible = !data_2.visible" />
+                <pannel-wid v-model="data_2.visible" v-bind="data_2.props">
+                    <div class="color-mgray pcenter pad-2 w-25 round-md bg-color-light line thick-1 line-mgray shadow-sm">
+                        <span class="color-blue">javascript + typescript</span>
+                    </div>
+                </pannel-wid>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--定位弹窗-->
+        <section>
+            <h5>定位弹窗</h5>
+            <p>可以通过 <code>pos</code> 属性来对面板进行九宫格定位，属性值：1-9。之后可以通过 <code>offset-styles</code> 属性来进行位移调整。</p>
+            <p>【exp】右下方显示弹窗，向上位移 100px，向左位移 100px：</p>
+            <p class="flex resize">
+                <btn-wid btnText="显示弹窗" @on_click="data_3.visible = !data_3.visible" />
+                <pannel-wid v-model="data_3.visible" v-bind="data_3.props">
+                    <div class="color-mgray pcenter pad-2 w-25 round-md bg-color-light line thick-1 line-mgray shadow-sm">
+                        <span class="color-blue">vue VS react</span>
+                    </div>
+                </pannel-wid>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--全屏弹窗-->
+        <section>
+            <h5>全屏弹窗</h5>
+            <p>可以通过 <code>max-enable</code> 属性来启用满屏弹窗，<b>width</b> 字段设置面板宽度样式数值；<b>height</b> 字段设置面板高度样式数值；<b>bg</b> 字段设置面板背景色样式色值。通常启用满屏弹窗后无需再对插槽内容进行尺寸设置。</p>
+            <p class="flex resize">
+                <btn-wid btnText="显示全屏弹窗" @on_click="data_4.visible = !data_4.visible" />
+                <pannel-wid v-model="data_4.visible" v-bind="data_4.props">
+                    <div class="flex-5 fsize-3 max">
+                        <span class="color-blue">Full Screen !</span>
+                    </div>
+                </pannel-wid>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--侧边栏-->
+        <section>
+            <h5>侧边栏</h5>
+            <p>通过全屏设置可以变相实现侧边栏，同时可以更进一步通过 <code>transition</code> 属性设置面板的转场方式。</p>
+            <p class="flex resize">
+                <btn-wid btnText="显示侧边栏" @on_click="data_5.visible = !data_5.visible" />
+                <pannel-wid v-model="data_5.visible" v-bind="data_5.props">
+                    <div class="fsize-1d1">
+                        <ul class="pad-l-2 pad-v-3 color-sub">
+                            <li class="pad-v-1 line-b thick-1 line-neutral">About Us</li>
+                            <li class="pad-v-1 line-b thick-1 line-neutral">Production</li>
+                            <li class="pad-v-1 line-b thick-1 line-neutral">Custom</li>
+                            <li class="pad-v-1 line-b thick-1 line-neutral">Service</li>
+                            <li class="pad-v-1">Contact Us</li>
+                        </ul>
+                    </div>
+                </pannel-wid>
+            </p>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import BtnWid from "@/components/BTXUI/btn/btn-wid"
+    import PannelWid from "@/components/BTXUI/pannel/pannel-wid"
+
+    export default {
+        name: "pannel_wid_demo",
+        components: {
+            HeaderInfo,
+            BtnWid,
+            PannelWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: PannelWid.name,
+                    ...PannelWid.introduce,
+                },
+
+                data_1: {
+                    visible: false
+                },
+
+                data_2: {
+                    props: {
+                        matte: true,
+                        matteColor: "rgba(245,245,255,.7)",
+                        mattePattern: require("@/assets/img/bg_pattern.png"),
+                        closeBtn: true,
+                        matteClose: "click"
+                    },
+                    visible: false
+                },
+
+                data_3: {
+                    props: {
+                        matte: true,
+                        matteColor: "rgba(220,220,220,.7)",
+                        closeBtn: true,
+                        pos: 9,
+                        offset: {
+                            x: "f100px",
+                            y: "f100px"
+                        }
+                    },
+                    visible: false
+                },
+
+                data_4: {
+                    props: {
+                        closeBtn: true,
+                        maxEnable: {
+                            width: "100%",
+                            height: "100%",
+                            bg: "rgba(255,255,255,.94)",
+                        }
+                    },
+                    visible: false
+                },
+
+                data_5: {
+                    props: {
+                        matte: true,
+                        pos: 3,
+                        transition: {
+                            in_styles: "translateX-0",
+                            out_styles: "translateX-100"
+                        },
+                        matteColor: "rgba(40,40,40,.7)",
+                        matteClose: "click",
+                        maxEnable: {
+                            width: 20,
+                            height: "100%",
+                            bg: "dark",
+                        }
+                    },
+                    visible: false
+                },
+
+            }
+        }
+    }
+</script>

package/pages/example/app_wid/range_wid_demo.vue

@@ -0,0 +1,101 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>通过 v-model 可以初始化及双向绑定拖动数值；通过 <code>min</code> 及 <code>max</code> 属性可以设置滑块拖动区间的最大、最小值。</p>
+            <div class="resize rw-50p rw-100p-s">
+                <range-wid v-bind="data_1.props" v-model="data_1.cur_val" />
+            </div>
+            <p>当前选择数据：{{data_1.cur_val}}</p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--风格化-->
+        <section>
+            <h5>风格化</h5>
+            <p>组件 <code>blockSize</code> 属性可设置拖拽滑块的宽高尺寸；<code>colors</code> 字段可设置配色风格，包括：<b>normal</b> 滑块常规色、<b>act</b> 滑块激活色、<b>track</b> 滑块轨道颜色。</p>
+            <div class="resize rw-50p rw-100p-s">
+                <range-wid v-bind="data_2.props" v-model="data_2.cur_val" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--步进设置-->
+        <section>
+            <h5>步进设置</h5>
+            <p>组件 <code>step</code> 属性可以设置拖动歩进值。</p>
+            <div class="resize rw-50p rw-100p-s">
+                <range-wid v-bind="data_3.props" v-model="data_3.cur_val" />
+            </div>
+            <p>当前选择数据：{{data_3.cur_val}}</p>
+        </section>
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import RangeWid from "@/components/BTXUI/range/range-wid"
+
+    export default {
+        name: "range_wid_demo",
+        components: {
+            HeaderInfo,
+            RangeWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: RangeWid.name,
+                    ...RangeWid.introduce,
+                },
+
+                data_1: {
+                    props: {
+                        min: 0,
+                        max: 100,
+                    },
+                    cur_val: 0
+                },
+
+                data_2: {
+                    props: {
+                        min: 0,
+                        max: 100,
+                        blockSize: {
+                            width: 3.7,
+                            height: 3.7,
+                        },
+                        colors: {
+                            normal: {
+                                bg: "sub",
+                                line: "none"
+                            },
+                            act: {
+                                bg: "blue",
+                                line: "none"
+                            },
+                            track: "dgray"
+                        }
+                    },
+                    cur_val: 0
+                },
+
+                data_3: {
+                    props: {
+                        min: 0,
+                        max: 100,
+                    },
+                    cur_val: 0
+                },
+
+            }
+        }
+    }
+</script>