btxui 1.0.2 → 1.0.5

package/pages/example/app_wid/imgs_upload_wid_demo.vue

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

@@ -1,158 +0,0 @@
-//功能组件
-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

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

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

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