代码信息

保存到分组
外部资源
$[libs.length]
暂无
- $[lib.showName]
添加新的资源

$[newLibMessage]

更多文件见开放CDN服务
快捷键
快捷键风格同 Sublime，同时支持 Emmet 特性，常用快捷键：

全局快捷键
- Ctrl + Enter：运行
- Ctrl + ←/→：折叠左侧菜单
- Ctrl + O：打开添加常用资源
- Ctrl + Z：撤销所有编辑器
- Ctrl + U：恢复所有编辑器
- F11：最大化运行结果
- ESC：关闭添加常用资源
编辑器快捷键
- Ctrl + Enter：运行
- Ctrl + /：注释代码
- Ctrl + H：格式化代码
- Ctrl + Z：撤销
- Ctrl + Y：恢复
- Tab：快捷生成代码
- Ctrl + L：选中当前行
- Ctrl + Q：折叠当前代码
- F11：最大化当前编辑器
关于

JShare 是一个在线代码测试、托管、分享的工具；

当前版本 $[base.version]，这里有更新日志；

使用前请查阅帮助文档及说明；

Copyright © 2020 JShare，由简数科技提供服务，浙ICP备16004892号-3

vue-demo | JShare

vue列表

Vue.component('simple-grid', {
    template: '#grid-template',
    props: ['dataList', 'columns', 'searchKey'],
    data: function() {
        return {
            sortKey: '',
            sortOrder: -1,
            mode: 0,
            item: {},
            title: '',
            //currentKey: '',
            test: false //测试是可行的 不过必须是同步状态
        }
    },
    methods: {
        deleteItem: function(entry) {
            var data = this.dataList
            data.forEach(function(item, i) {
                if (item === entry) {
                    data.splice(i, 1)
                    return
                }
            })
        },
        sortBy: function(key) {
            //alert(key.name)
            this.sortKey = key.name;
            this.sortOrder = this.sortOrder > 0 ? -1 : 1;
        },
        openNewItemDialog: function(title) {
            //测试不用广播打开对话框 //测试是可行的 不过必须是同步状态 //广播利于解耦
            this.test = true;
            //对话框标题
            this.title = title;
            // mode = 1 表示新建模式
            this.mode = 1;
            // 初始化this.item  //原版为空
            this.item = {
                sex: 'Male'
            };
            // 广播事件,showDialog是modal-dialog组件的一个方法,传入参数true表示显示对话框
            //广播比派发简单多了 不用绕一下不错.
            this.$broadcast('showDialog', true);
        },
        openEditItemDialog: function(index, title) {
            // 对话框标题
            this.title = title;
            // 模式2 修改
            this.mode = 2;
            // 修改数据
            this.item = this.dataList[index];
            // 打开对话框
            this.$broadcast('showDialog',true);
            //修改当期key 以便保存的时候用.
            this.currentKey = index;
            //下面是曾经测试用的
            // //终于明白API说的 不能检测是啥意思了. 这个可以这么设置,但是页面不能自动刷新
            // //虽然数据变了,但是页面上不显示
            // this.dataList[index] = {
            // 		name: 'elick',
            // 		age: 34,
            // 		sex: 'Male'
            // 	}
            // 	//所以用这种方法可以更新数据数组,那么原本的那些复杂的写法真就不懂干啥用了
            // this.dataList.$set(index, {
            // 	name: 'xwiwi',
            // 	age: '24',
            // 	sex: 'Female'
            // })
            // var aa = this.dataList[index];
            // console.log(aa);
            //
        },
        createItem: function() {
            if(!this.itemExists()){
                alert('这是方法');
                //测试不用广播关闭对话框
                this.test = false;
                //将item追加到dataList
                this.dataList.push(this.item);
                //广播事件, 传入参数false表示隐藏对话框
                this.$broadcast('showDialog', false);
                //新建万数据后,清空item对象
                this.item = {}
            }else{
                alert('已经存在了');
            }
        },
        updateItem: function() {
            //这真见了鬼了,不需要更改dataList他就自动和item关联起来了.
            //this.dataList.$set(this.currentKey,this.item);
            //this.currentKey = '';
            this.item = {}
            this.$broadcast('showDialog',false)
        },
        itemExists: function () {
            for (var i = 0; i < this.dataList.length; i++) {
                if(this.dataList[i].name == this.item.name) return true;
            }
            return false
        }
    },
    events: {
        //这是事件处理器
        'create-item': function() {
            alert('这是事件');
            //测试不用广播关闭对话框
            this.test = false;
            //将item追加到dataList
            this.dataList.push(this.item);
            //广播事件, 传入参数false表示隐藏对话框
            this.$broadcast('showDialog', false);
            //新建万数据后,清空item对象
            this.item = {}
        }
    },
    components: {
        'modal-dialog': {
            template: '#dialog-template',
            data: function() {
                return {
                    show: false
                }
            },
            props: ['mode', 'title', 'fields', 'item', 'test'],
            methods: {
                close: function() {
                    // this.test = false
                    this.show = false
                },
                save: function() {
                    if (this.mode === 1) {
                        // 使用$dispatch调用simple-grid的create-item方法
                        //为什么不在子组件直接处理呢?	//因为数据都在父组件里,并没有把数组穿过来
                        //这也没必要因为这是个添加内容的组件,不需要知道那么多
                        this.$dispatch('create-item'); //这里的事件'create-item' 是父事件
                        //@create-item="createItem" 这两个都是父的东西
                    }
                    if (this.mode === 2) {
                        this.$dispatch('update-item');
                    }
                }
            },
            events: {
                // 显示或隐藏对话框
                //这个也是为什么要通过广播呢?
                'showDialog': function(show) {
                    this.show = show;
                }
            }
        }
    },
})
var demo = new Vue({
    el: '#app',
    data: {
        searchQuery: '',
        columns: [{
            name: 'name',
            isKey: true
        }, {
            name: 'age'
        }, {
            name: 'sex',
            dataSource: ['Male', 'Female']
        }],
        people: [{
            name: 'Jack',
            age: 30,
            sex: 'Male'
        }, {
            name: 'Bill',
            age: 26,
            sex: 'Male'
        }, {
            name: 'Tracy',
            age: 22,
            sex: 'Female'
        }, {
            name: 'Chris',
            age: 36,
            sex: 'Male'
        }]
    }
})

<div id="app">
    <div class="container">
        <div class="form-group">
            <label>Search</label>
            <input type="text" class="search-input" v-model="searchQuery" />
        </div>
    </div>
    <div class="container">
        <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"></simple-grid>
    </div>
</div>
<template id="grid-template">
    <table>
        <thead>
            <tr>
                <th v-for="col in columns" @click="sortBy(col)">
                    {{ col.name | capitalize}}
                </th>
                <th>
                    Delete
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(index,entry) in dataList | filterBy searchKey | orderBy sortKey sortOrder">
                <td v-for="col in columns">
                    <span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(index,'Edit item '+entry[col.name])">{{ entry[col.name] }}</a></span>
                    <span v-else>{{entry[col.name]}}</span>
                </td>
                <td class="text-center">
                    <button class="btn-danger" @click="deleteItem(entry)">delete</button>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- 测试不用广播打开对话, test 必须是 :test.sync 同步模式 这样在子组件关闭的时候,父组件也知道状态  可能广播更科学吧 利于解耦 -->
    <!-- 前面是子后面是父  :fields="columns" :fields 子 columns 父-->
    <!--  @create-item="createItem" 这个绑定事件 就和其他不一样了 两个都是父东西 把父事件 create-item 绑定到 createItem 方法 -->
    <!-- 又看遍文档  -@-> 在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器） -->
    <!-- 其实是约定,自定义子组件有这么一个事件, 如果子组件触发,发送了这个事件, 父组件就用 **同名** 的事件处理器,处理这个事件的响应 -->
    <!-- 或者这么理解吧 有助于记忆 绑定子发送的事件 @create-item 到父方法 createItem  这样就又是 子:父 -->
    <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" :test.sync='test' @create-item="createItem" @update-item="updateItem">
    </modal-dialog>
    <div class="container">
        <button class="btn" @click="openNewItemDialog('Create new item')">Create</button>
    </div>
</template>
<template id="dialog-template">
    <div id="dialogs">
        <!-- <div class="dialog" :class="{ 'dialog-active' : test }"> -->
        <div class="dialog" :class="{ 'dialog-active' : show }">
            <div class="dialog-content">
                <header class="dialog-header">
                    <h1 class="dialog-title">{{ title }}</h1>
                </header>
                <div v-for="field in fields" class="form-group">
                    <label>{{ field.name }}</label>
                    <select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey ">
                        <option v-for="opt in field.dataSource" :value="opt"> {{ opt }}</option>
                    </select>
                    <input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
                </div>
                <footer class="dialog-footer">
                    <div class="form-group">
                        <label></label>
                        <button @click="save">Save</button>
                        <button @click="close">Close</button>
                    </div>
                </footer>
            </div>
        </div>
        <div class="dialog-overlay"></div>
    </div>
</template>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, simhei, Arial, sans-serif;
}
html {
    font-size: 1rem;
}
body {
    margin-top: 100px;
}
table,
td,
th {
    border-collapse: collapse;
    border-spacing: 0
}
table {
    width: 100%;
}
td,
th {
    border: 1px solid #bcbcbc;
    padding: 5px 10px;
}
th {
    padding: 10px;
    font-weight: 400;
    color: #fff;
    background: #0090d3;
    cursor: pointer;
}
tr:nth-of-type(odd) {
    background: #fff
}
tr:nth-of-type(even) {
    background: #eee
}
h1 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}
input {
    outline: none
}
input[type=text] {
    padding: 3px 6px;
    font-size: 1.2rem;
    border: 1px solid #ccc;
}
input[type=text]:focus {
    border-color: #0090d3;
    transition: .3s ease-in;
}
button {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 30px;
    background: #0090d3;
    color: #fff;
    border: 1px solid #0090d3;
    border-radius: 3px;
    outline: 0;
    transition: .4s ease-out;
}
button:hover,
button:focus {
    opacity: 0.8;
    cursor: pointer;
    transition: .15s ease-in;
}
#app {
    margin: 0 auto;
    max-width: 640px;
}
.btn-danger {
    padding: 5px 15px;
    border: 1px solid salmon;
    background: salmon;
}
.btn-save {
    border: 1px solid #0090d3;
    background: #0090d3;
}
.btn-close {
    border: 1px solid #ccc;
    background: #ccc;
}
.container {
    padding-left: 15px;
    padding-right: 15px;
    margin: 10px;
}
.search-input {
    width: 80%;
}
.form-group {
    margin: 10px;
}
.form-group > label {
    display: inline-block;
    padding-right: 1rem;
    width: 5rem;
    text-align: right;
}
.form-group > input,
.form-group > select {
    display: inline-block;
    height: 1.8rem;
    line-height: 1.8rem;
}
.text-center {
    text-align: center;
}
.dialog {
    width: 480px;
    position: fixed;
    left: 50%;
    top: 2em;
    transform: translateX(-50%);
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    perspective: 1300px;
}
.dialog-active {
    visibility: visible;
}
.dialog-active .dialog-content {
    opacity: 1;
    transform: rotateY(0);
}
.dialog-active ~ .dialog-overlay {
    opacity: 1;
    visibility: visible;
}
.dialog-content {
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: .5s ease-in-out;
    opacity: 0;
    transform-style: preserve-3d;
    transform: rotateY(-70deg);
}
.dialog-header {
    background: #0090d3;
    color: #fff;
}
.dialog-title {
    margin: 0;
    font-size: 2em;
    text-align: center;
    font-weight: 200;
    line-height: 2em;
}
.dialog-body {
    padding: 2em;
}
.dialog-footer {
    margin: 0 2em;
    padding: 1em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dialog-overlay {
    content: "";
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: all .6s;
}

{"resource":"16","options":null,"code":{"code":"OYZT3i","name":"vue-demo","version":1,"doctype":0,"description":"vue列表","meta":null,"newGroup":706,"group":{"id":706,"name":"blogDemo","code":"blog-demo"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

vue-demo | JShare

vue列表

模板（查看所有模板）

外部资源
$[libs.length]