btxui 1.0.1

package/pages/example/app_wid/table_wid_demo.vue

@@ -0,0 +1,377 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <div class="resize">
+                <table-wid v-bind="data_1" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义色彩及单元行点击效果-->
+        <section>
+            <h5>自定义色彩及单元行点击效果</h5>
+            <p>通过 <code>colors</code> 属性可以自定义表格标题色、行首色、奇数行色、偶数行色、行悬停色、表格描边色及表格轮廓色。此外单元格内容都支持超文本设置。需要注意的是，只有在设置了行悬停色的前提下，才能够通过 <code>on_click</code> API 为单元行绑定点击事件，在回调函数中可获取当前行索引。</p>
+            <p>通过 <code>enable_row_click</code> 和 <code>disable_row_click</code> 方法，可以切换单元行的点击效果，前提依然需要设置行悬停色。</p>
+            <div class="resize">
+                <table-wid ref="table_2" v-bind="data_2.props" @on_click="$_show_row_number2" />
+                <div class="flex mrg-t-1">
+                    <tag-wid @on_click="$_toggle_row_enable2" v-bind="data_2.tag_data" v-model="data_2.enable" />
+                </div>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义单元格宽度-->
+        <section>
+            <h5>自定义单元格宽度</h5>
+            <p>通过 <code>thead</code> 属性中的 <b>grow</b> 字段可以设置单元格的自生长比率从而决定其显示宽度。此外 <b>width</b> 字段可以设置单元格的固定宽度。</p>
+            <div class="resize">
+                <table-wid v-bind="data_3" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--设置单元格封面及按钮-->
+        <section>
+            <h5>设置单元格封面及按钮</h5>
+            <p><code>tbody</code> 属性对应的数据元素可以设置为 "纯文本"、"tag-wid" 以及 "b-img"。</p>
+            <div class="resize">
+                <table-wid v-bind="data_4" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--复选单元行-->
+        <section>
+            <h5>复选单元行</h5>
+            <p>通过 <code>enable_row_select</code> 和 <code>disable_row_select</code> 方法，可以切换单元行的首项选择控件，进而实现单元行的复选效果。</p>
+            <div class="resize">
+                <table-wid ref="table_5" v-bind="data_5.props" @on_select="$_select5" />
+                <div class="flex mrg-t-1">
+                    <tag-wid @on_click="$_toggle_row_select5" v-bind="data_5.tag_data" v-model="data_5.enable" />
+                </div>
+            </div>
+            <p>
+                当前所选数据行：
+                <template v-if="data_5.selected.length">
+                    <code v-for="row of data_5.selected">{{row + 1}}</code>
+                </template>
+                <span v-else class="alpha-d5">暂无选择</span>
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--单元行折叠-->
+        <section>
+            <h5>单元行折叠</h5>
+            <p>通过 <code>collapse</code> 属性可设置单元行折叠显示行数。</p>
+            <div class="resize">
+                <table-wid v-bind="data_6.props"/>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import tagWid from "@/components/BTXUI/tag/tag-wid"
+    import TableWid from "@/components/BTXUI/table/table-wid"
+
+    export default {
+        name: "table_wid_demo",
+        components: {
+            HeaderInfo,
+            TableWid,
+            tagWid
+        },
+        data(){
+            const tag_data = {
+                text: "考试通过",
+                actText: "考试未过",
+                colors: {
+                    normal: {
+                        text: "dgray",
+                        bg: "neutral",
+                    },
+                    act: {
+                        text: "light",
+                        bg: "green",
+                    },
+                    hover: {
+                        text: "dgray",
+                        bg: "#ddd",
+                    }
+                },
+                mode: "checkbox"
+            };
+
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: TableWid.name,
+                    ...TableWid.introduce,
+                },
+
+                data_1: {
+                    thead: [
+                        {
+                            title: "Name"
+                        },
+                        {
+                            title: "Sex"
+                        },
+                        {
+                            title: "Rank"
+                        },
+                    ],
+                    tbody: [
+                        ["nick", "male", 87],
+                        ["tommy", "male", 92],
+                        ["lucy", "female", 90],
+                    ]
+                },
+
+                data_2: {
+                    props: {
+                        thead: [
+                            {
+                                title: "<span class='color-main'>Name</span>"
+                            },
+                            {
+                                title: "<span class='color-light'>Sex</span>"
+                            },
+                            {
+                                title: "<span class='color-light'>Rank</span>"
+                            },
+                        ],
+                        tbody: [
+                            ["nick", "<span class='color-blue'>male</span>", 87],
+                            ["tommy", "<span class='color-blue'>male</span>", 92],
+                            ["lucy", "<span class='color-red'>female</span>", 90],
+                            ["neo", "<span class='color-blue'>male</span>", "<span class='round-md bg-color-green color-light pad-h-1'>100</span>"],
+                            ["robbin", "<span class='color-red'>female</span>", 88],
+                        ],
+                        colors: {
+                            thead: "sub",
+                            row: {
+                                head: "rgba(255,255,255,.7)",
+                                odd: "lgray",
+                                even: "#ddd",
+                                hover: "#d7d7d7"
+                            },
+                            line: "lgray",
+                            outline: "sub"
+                        }
+                    },
+                    tag_data: {
+                        id: "data_2",
+                        text: "启用单元行点击",
+                        actText: "禁用单元行点击",
+                        colors: {
+                            normal: {
+                                text: "dgray",
+                                bg: "lgray"
+                            },
+                            hover: {
+                                text: "dgray",
+                                bg: "#ddd",
+                            }
+                        },
+                        mode: "checkbox"
+                    },
+                    enable: true
+                },
+
+                data_3: {
+                    thead: [
+                        {
+                            title: "Name",
+                            width: 7,
+                        },
+                        {
+                            title: "Age",
+                            grow: 1,
+                        },
+                        {
+                            title: "Sex",
+                            grow: 2,
+                        },
+                        {
+                            title: "Rank",
+                            grow: 3,
+                        },
+                    ],
+                    tbody: [
+                        ["nick", 23, "male", 87],
+                        ["tommy", 22, "male", 92],
+                        ["lucy", 23, "female", 90],
+                        ["neo", 20, "male", 100],
+                        ["robbin", 25, "female", 88],
+                    ],
+                    colors: {
+                        thead: "lgray",
+                        row: {
+                            head: "none",
+                            odd: "lgray",
+                            even: "lgray",
+                        },
+                        line: "#fff",
+                        outline: "none"
+                    }
+                },
+
+                data_4: {
+                    thead: [
+                        {
+                            title: "Cover",
+                            grow: 1,
+                        },
+                        {
+                            title: "Name",
+                            grow: 1,
+                        },
+                        {
+                            title: "subject",
+                            grow: 2,
+                        },
+                        {
+                            title: "pass",
+                            grow: 1,
+                        }
+                    ],
+                    tbody: [
+                        [{
+                            src: require("@/assets/img/head.jpg"),
+                            height: 5
+                        }, "nick", "javascript", {
+                            tag_data,
+                            selected: false,
+                            callback: this.$_show_pass4
+                        }],
+                        [{
+                            src: require("@/assets/img/head2.jpg"),
+                            height: 5
+                        }, "nick", "html", {
+                            tag_data,
+                            selected: false,
+                            callback: this.$_show_pass4
+                        }],
+                        [{
+                            src: require("@/assets/img/head.jpg"),
+                            height: 5
+                        }, "nick", "css", {
+                            tag_data,
+                            selected: false,
+                            callback: this.$_show_pass4
+                        }],
+                    ]
+                },
+
+                data_5: {
+                    props: {
+                        thead: [
+                            {
+                                title: "Name"
+                            },
+                            {
+                                title: "subject"
+                            },
+                            {
+                                title: "Rank"
+                            },
+                        ],
+                        tbody: [
+                            ["nick", "javascript", 78],
+                            ["nick", "html", 99],
+                            ["nick", "css", 100],
+                        ]
+                    },
+                    tag_data: {
+                        id: "data_5",
+                        text: "启用单元行选择",
+                        actText: "禁用单元行选择",
+                        colors: {
+                            normal: {
+                                text: "dgray",
+                                bg: "lgray"
+                            },
+                            hover: {
+                                text: "dgray",
+                                bg: "#ddd",
+                            }
+                        },
+                        mode: "checkbox"
+                    },
+                    selected: [],
+                    enable: false
+                },
+
+                data_6: {
+                    props: {
+                        thead: [
+                            {
+                                title: "Name"
+                            },
+                            {
+                                title: "subject"
+                            },
+                            {
+                                title: "Rank"
+                            },
+                        ],
+                        tbody: [
+                            ["nick", "javascript", 78],
+                            ["nick", "html", 99],
+                            ["nick", "css", 100],
+                            ["nick", "php", 89],
+                            ["nick", "typescript", 91],
+                        ],
+                        collapse: {
+                            rows: 3,
+                            tag_data: {
+                                text: "Spread",
+                                actText: "Collapse",
+                            }
+                        },
+                    }
+                },
+
+            }
+        },
+        methods: {
+
+            $_show_row_number2(index){
+                this.$confirm.toast(`当前点击行号为：${index + 1}`);
+            },
+
+            $_toggle_row_enable2(id, state){
+                this.$refs.table_2[state? 'enable_row_click': 'disable_row_click']();
+            },
+
+            $_show_pass4(row, state) {
+                const subject = this.data_4.tbody[row][2];
+                this.$confirm.toast(`<b>${subject}</b> 学科${state? '通过': '未通过'}考试`, 2000, state? "success": "notic");
+            },
+
+            $_toggle_row_select5(id, state){
+                this.$refs.table_5[state? 'enable_row_select': 'disable_row_select']();
+            },
+
+            $_select5(selected_rows){
+                this.data_5.selected = selected_rows;
+            },
+
+        }
+    }
+</script>

package/pages/example/app_wid/tag_wid_demo.vue

@@ -0,0 +1,133 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础单选使用-->
+        <section>
+            <h5>基础单选使用</h5>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tag-wid v-bind="data_1.props" v-model="data_1.selected" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--基础复选使用-->
+        <section>
+            <h5>基础复选使用</h5>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tag-wid v-bind="data_2.props" v-model="data_2.selected" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--双向绑定默认值-->
+        <section>
+            <h5>双向绑定默认值</h5>
+            <p>通过 <code>v-model</code> 可以初始化及双向绑定标签状态，状态值可以是布尔值或对应的数字（true: 1, false: 0）。通过外部设置可以将单选按钮重新复位。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tag-wid v-bind="data_3.props" v-model="data_3.selected" />
+            </div>
+            <p class="resize flex">
+                <btn-wid btnText="复位标签状态" @on_click="$_click3" />
+            </p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--设置标签颜色-->
+        <section>
+            <h5>设置标签颜色</h5>
+            <p>通过 <code>colors</code> 属性可以自定义色彩方案。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tag-wid v-bind="data_4.props" v-model="data_4.selected" />
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import TagWid from "@/components/BTXUI/tag/tag-wid"
+    import BtnWid from "@/components/BTXUI/btn/btn-wid"
+
+    export default {
+        name: "tag_wid_demo",
+        components: {
+            HeaderInfo,
+            TagWid,
+            BtnWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: TagWid.name,
+                    ...TagWid.introduce,
+                },
+
+                data_1: {
+                    props: {
+                        id: "a",
+                        text: "单选标签"
+                    },
+                    selected: false
+                },
+
+                data_2: {
+                    props: {
+                        id: "a",
+                        text: "复选标签",
+                        mode: "checkbox"
+                    },
+                    selected: false
+                },
+
+                data_3: {
+                    props: {
+                        id: "a",
+                        text: "单选标签",
+                        actText: "选中状态",
+                        mode: "radio"
+                    },
+                    selected: 1
+                },
+
+                data_4: {
+                    props: {
+                        id: "a",
+                        text: "单选标签",
+                        actText: "选中状态",
+                        mode: "checkbox",
+                        colors: {
+                            normal: {
+                                text: "light",
+                                bg: "#444",
+                            },
+                            act: {
+                                text: "main",
+                                bg: "sub",
+                            },
+                            hover: {
+                                text: "sub",
+                                bg: "dark",
+                            },
+                        }
+                    },
+                    selected: false
+                }
+
+            }
+        },
+        methods: {
+
+            $_click3(){
+                this.data_3.selected = false;
+            }
+
+        }
+    }
+</script>

package/pages/example/app_wid/tags_wid_demo.vue

@@ -0,0 +1,143 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础单选使用-->
+        <section>
+            <h5>基础单选使用</h5>
+            <p>通过 v-model 绑定响应式数据。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tags-wid v-bind="data_1.props" v-model="data_1.selected" />
+            </div>
+            <p>当前所选数据：<code v-for="id of data_1.selected">{{id}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--复选使用-->
+        <section>
+            <h5>复选使用</h5>
+            <p>数据属性 <code>mode="checkbox"</code> 可以设置复选框操作。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tags-wid v-bind="data_2.props" v-model="data_2.selected" />
+            </div>
+            <p>当前所选数据：<code v-for="id of data_2.selected">{{id}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义配色-->
+        <section>
+            <h5>自定义配色</h5>
+            <p>通过 <code>colors</code> 属性可以自定义色彩方案。</p>
+            <div class="resize bg-color-lgray pad-v-1 pad-h-2 round-sm">
+                <tags-wid v-bind="data3.props" v-model="data3.selected" />
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import TagsWid from "@/components/BTXUI/tags/tags-wid"
+
+    export default {
+        name: "tags_wid_demo",
+        components: {
+            HeaderInfo,
+            TagsWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: TagsWid.name,
+                    ...TagsWid.introduce,
+                },
+
+                //基础渲染数据1
+                data_1: {
+                    props: {
+                        tagList: [
+                            {
+                                id: "html",
+                                text: "html"
+                            },
+                            {
+                                id: "css",
+                                text: "css"
+                            },
+                            {
+                                id: "javascript",
+                                text: "javascript"
+                            },
+                        ]
+                    },
+                    selected: []
+                },
+
+                //基础渲染数据2
+                data_2: {
+                    props: {
+                        tagList: [
+                            {
+                                id: "html",
+                                text: "html"
+                            },
+                            {
+                                id: "css",
+                                text: "css"
+                            },
+                            {
+                                id: "javascript",
+                                text: "javascript"
+                            },
+                        ],
+                        mode: "checkbox"
+                    },
+                    selected: []
+                },
+
+                //数据3
+                data3: {
+                    props: {
+                        tagList: [
+                            {
+                                id: "html",
+                                text: "html"
+                            },
+                            {
+                                id: "css",
+                                text: "css"
+                            },
+                            {
+                                id: "javascript",
+                                text: "javascript"
+                            },
+                        ],
+                        colors: {
+                            normal: {
+                                text: "light",
+                                bg: "#444",
+                            },
+                            act: {
+                                text: "main",
+                                bg: "sub",
+                            },
+                            hover: {
+                                text: "sub",
+                                bg: "dark",
+                            },
+                        }
+                    },
+                    selected: [],
+                },
+
+            }
+        },
+        methods: {
+        }
+    }
+</script>