造轮子-省市区级联选择组件

小知识点：

如果你的文件是不需要编译的最后文件名前加一个下划线(_)，比如_var.scss
2.vue的属性不能以data开头，否则转成默认属性
比如：datasource只能写成source
3.如果你在当前组件中使用了与你name相同的标签，那么name就是你当前的组件

4.我们不知道要渲染的数据有多少层，我们该怎么用v-for遍历？
比如有些区下面有镇，有的没有，也就是说无法确定当前数据数组有几层的情况下，那么我们可以通过递归组件让组件（通过组件自己调用自己来实现）
小案例

index.html

<div id="app" style="padding: 100px;">
    <g-cascader :source="source"></g-cascader>
</div>
<script>
let app = new Vue({
  el: '#app',
  data: {
    source: [
    {
        name: '浙江',
        children: [
            {
                name: '杭州',
                children: [
                    {name: '上城'},
                    {name: '下城'},
                    {name: '江干'}
                ]
            },{
                name: '嘉兴',
                children: [
                    {name: '南湖'},
                    {name: '秀洲'},
                    {name: '嘉善'}
                ]
            }
        ]
    },
    {
        name: '福建',
        children: [
            {
                name: '福州',
                children: [
                    {name: '鼓楼'},
                    {name: '台江'},
                    {name: '苍山'}
                ]
            }
        ]
    }
]
   }
})
</script>

cascader.vue

<template>
    <div class="cascader">
        <div class="popover">
            <div v-for="item in source">
               <cascader-item :sourceItem="item"></cascader-item>
            </div>
        </div>
    </div>
</template>
<script>
import CascaderItem from './cascaderitem.vue'
export default {
    name: 'GuluCascader',
    props: {
        source: {
            type: Array
        }
    },
    components: {CascaderItem}
}
</script>

cascaderitem.vue

<template>
    <div class="cascader-item">
        {{sourceItem.name}}
        <gulu-cascader-item v-for="(item,index) in sourceItem.children" 
        v-if="sourceItem.children"
        :sourceItem="item"
        :key="index"   
        >
        </gulu-cascader-item>
    </div>
</template>
<script>
export default {
    name: 'GuluCascaderItem',
    props: {
        sourceItem: {
            type: Object
        }
    }
}
</script>

上面的代码在index里使用了cascader.vue这个组件，这个组件接受父组件传进来的source数组，
然后遍历最开始的数组，拿到数组里面第一层的每一项，之后通过递归组件cascaderitem.vue接受你拿到的数组第一层的每一项（对象），显示你这每一项里面的name，然后调用自己再次进行遍历判断你传进来的sourceItem.children是否存在，如果存在就继续遍历souceItem.children，把拿到的新的对象item传给souceItem，然后再次显示这里面每一项的name，直到对应的item下面的children不存在为止。这里要注意递归组件自己本身要传入的属性，在自己内部也要再写一遍，就像上面的:sourceItem="item"
以上面的案例为例，一开始在cascader.vue组件里传入的是最开始的数据，然后遍历分别拿到的item是

{
    name: '浙江',
    children: [
        {
            name: '杭州',
            children: [
                {name: '上城'},
                {name: '下城'},
                {name: '江干'}
            ]
        },{
            name: '嘉兴',
            children: [
                {name: '南湖'},
                {name: '秀洲'},
                {name: '嘉善'}
            ]
        }
    ]
},
{
    name: '福建',
    children: [
        {
            name: '福州',
            children: [
                {name: '鼓楼'},
                {name: '台江'},
                {name: '苍山'}
            ]
        }
    ]
}

上面两个对象，之后分别调用递归组件把这两个对象作为item依次传进去，开始执行cascaderitem.vue组件里的代码，以第一个浙江的为例，拿到{{sourceItem.name}}也就是浙江，然后执行下面的代码

<gulu-cascader-item v-for="(item,index) in sourceItem.children" 
        v-if="sourceItem.children"
        :sourceItem="item"
        :key="index"   
        >
        </gulu-cascader-item>

也就是把当前的组件里的代码再执行一遍，它先判断sourceItem.children是否存在，因为sourceItem.children是

{
            name: '杭州',
            children: [
                {name: '上城'},
                {name: '下城'},
                {name: '江干'}
            ]
        }
{
            name: '嘉兴',
            children: [
                {name: '南湖'},
                {name: '秀洲'},
                {name: '嘉善'}
            ]
        }

所以再次对上面的对象也就是sourceItem.children再次进行遍历，得到的item分别为上面的两个，然后把这两个赋值给sourceItem，也就是sourceItem分别是杭州和嘉兴下面的对象，然后再分别使用这个组件，如此循环，最终得到下面结构

属性不要以show开头，因为以show开头的都是函数

页面渲染初步实现

正常情况下在已知有几层数据的情况下的视图渲染这里以上面的三层为例

<template>
    <div class="cascader">
        <div class="popover" @click="popoverVisibility = !popoverVisibility">
        </div>
        <div class="leave" v-if="popoverVisibility">
            <div class="leave1">
                <div v-for="item in source" @click="leave2 = item">
                    {{item.name}}
                </div>
            </div>
            <div class="leave2" v-for="item2 in selectLeave1"
            @click="leave3 = item2"
            >
                {{item2.name}}
            </div>
            <div class="leave3" v-for="item3 in selectLeave2">
                {{item3.name}}
            </div>

        </div>
    </div>
</template>
<script>
import CascaderItem from './cascaderitem.vue'
export default {
    name: 'GuluCascader',
    props: {
        source: {
            type: Array
        }
    },
    data(){
        return {
            popoverVisibility: false,
            leave2: null,
            leave3: null
        }
    },
    computed: {
        selectLeave1(){
            if(this.leave2){
                return this.leave2.children
            }
        },
        selectLeave2(){
            if(this.leave3){
                return this.leave3.children
            }
        }
    },
    components: {CascaderItem}
}
</script>

上面的代码一开始通过点击popover使leave显示，leave里面分了三层div，遍历第一层，点击第一层里对应的内容，比如浙江，把与浙江有关的数据添加到一个一开始为null的属性里，然后通过计算属性返回它里面的children，之后在第二层里遍历它，同样把当前下面的数据赋值给leave3，然后通过计算属性返回这个数据下的children再次遍历

改进：上面1的代码虽然实现了我们的功能，但是就像我们一开始说的我们根本不知道当前会有几层数据，所以我们还是需要通过递归的形式

cascaderitem.vue

<template>
    <div class="cascader-item">
        <div class="left">
            <div v-for="item in items" @click="leftSelected = item">
                {{item.name}}
            </div>
        </div>
        <div class="right" v-if="rightItems">
            <gulu-cascader-item :items="rightItems"></gulu-cascader-item>
        </div>
    </div>
</template>
<script>
export default {
    name: 'GuluCascaderItem',
    props: {
        items: {
            type: Array
        }
    },
    data(){
        return {
            leftSelected: null
        }
    },
    computed: {
        rightItems(){
            if(this.leftSelected && this.leftSelected.children){
                return this.leftSelected.children
            }else {
                return null
            }
        }
    }
}
</script>

cascader.vue

<template>
    <div class="cascader">
        <div class="popover" @click="popoverVisibility = !popoverVisibility">
        </div>
        <div class="leave" v-if="popoverVisibility">
            <cascader-item :items="source"></cascader-item>
        </div>
    </div>
</template>
<script>
import CascaderItem from './cascaderitem.vue'
export default {
    name: 'GuluCascader',
    props: {
        source: {
            type: Array
        }
    },
    data(){
        return {
            popoverVisibility: false,
        }
    },
    components: {CascaderItem}
}
</script>

上面的代码就是每次分为左边区域跟右边区域，然后你下次在你的右边里再次显示你的左边，依次类推，不断的在右侧调用你这个组件，也就是不断的在右侧显示你的左侧

让用户可以自定义高度

通过给cascader.vue传入一个height，然后在它中的props里声明这个height，然后再在cascader.vue中把这个height传给cascader-items.vue，在这里面设置style为你的height

index.html

<g-cascader :source="source" height="200px"></g-cascader>

cascader.vue

<div class="cascader">
  <cascader-item :items="source" :style="{height}" :height="height"></cascader-item>
</div>

import CascaderItem from './cascader-items.vue'
 props: {
        source: {
            type: Array
        },
        height: {
            type: String
        }
    },

cascader-items.vue

<template>
    <div class="cascader-item">
        <div class="left">
            <div class="label" v-for="item in items" @click="leftSelected = item">
                {{item.name}}
                <icon name="right" v-if="item.children"></icon>
            </div>
        </div>
        <div class="right" v-if="rightItems">
            <gulu-cascader-item :items="rightItems" :style="{height}" :height="height"></gulu-cascader-item>
        </div>
    </div>
</template>
<script>
import Icon from './icon.vue'
export default {
    name: 'GuluCascaderItem',
    props: {
        items: {
            type: Array
        },
        height: {
            type: String
        }
    },

重新点击第一层的时候后面的第三层的层级隐藏掉

实现方法：通过传一个selected数组，和一个level层级，默认selected是一个空数组，level为0，开始递归的时候level的值就等于level+1（也就是右侧的层级是在左侧的基础上加1），然后点击每一项的时候在selceted数组里的第level项的值为你点击的这一项的item（这样就可以保证每一层级在数组里只有一个值，不会每点击一个添加一个），并且每次点击的时候都把这个数组里的第level+1和之后的项全部删掉，然后通过子组件触发父组件的@update:selected事件把一个新的深拷贝的selected传给最外的父组件

demo.vue

<template>
    <div>
        <div style="padding: 20px;">
            <g-cascader :source="source" height="200px" :selected="selected"
                        @update:selected="selected = $event"
            ></g-cascader>
        </div>
    </div>
</template>
<script>
data(){
            return {
                source: [
                    {
                        name: '浙江',
                        children: [
                            {
                                name: '杭州',
                                children: [
                                    {name: '上城'},
                                    {name: '下城'},
                                    {name: '江干'}
                                ]
                            },{
                                name: '嘉兴',
                                children: [
                                    {name: '南湖'},
                                    {name: '秀洲'},
                                    {name: '嘉善'}
                                ]
                            }
                        ]
                    },
                    {
                        name: '福建',
                        children: [
                            {
                                name: '福州',
                                children: [
                                    {name: '鼓楼'},
                                    {name: '台江'},
                                    {name: '苍山'}
                                ]
                            }
                        ]
                    }
                ],
                selected: []
            }
        },
</script>

cascader.vue

<div class="popover" v-if="popoverVisibility">
            <cascader-item :items="source" :style="{height}" :height="height" :selected="selected" :level="level"
            @update:selected="onUpdateSelected"
            ></cascader-item>

<script>
import CascaderItem from './cascader-items.vue'
props: {
        selected: {
            type: Array,
            default: []
        },
        level: {
            type: Number,
            default: 0
        }
    },
computed: {
        result(){
            return this.selected.map(item=>{return item.name}).join('/')
        }
    },
    components: {CascaderItem},
    methods: {
        onUpdateSelected(val){
            this.$emit('update:selected',val)
        }
    }
</script>

cascader-item.vue

<template>
    <div class="cascader-item">
        <div class="left">
            <div class="label" v-for="item in items" @click="onSelected(item)" >
                {{item.name}}
                <icon name="right" v-if="item.children"></icon>
            </div>
        </div>
        <div class="right" v-if="rightItems">
            <gulu-cascader-item :items="rightItems" :style="{height}" :height="height" :selected="selected" :level="level+1"
              @update:selected="onUpdateSelected"
            ></gulu-cascader-item>
        </div>
    </div>
</template>
<script>
import Icon from './icon.vue'
export default {
    name: 'GuluCascaderItem',
    props: {
        items: {
            type: Array
        },
        height: {
            type: String
        },
        selected: {
            type: Array,
            default: ()=>{return []}
        },
        level: {
            type: Number,
            default: 0
        }
    },
    data(){
        return {

        }
    },
    computed: {
        rightItems(){
            let currentSelected= this.selected[this.level]
            if(currentSelected && currentSelected.children){
                return currentSelected.children
            }else {
                return null
            }
        }
    },
    components: {
        Icon
    },
    methods: {
        onSelected(item){
            let copy = JSON.parse(JSON.stringify(this.selected))
            //之所以写copy[this.level]是为了你点击当前层的每一个都让数组里只保留一个
            //而不是点一个就往数组里加一个，如果不写的话你点杭州数组里有一个杭州，再点福建
            //数组就会变成['杭州','福建']可这两个属于同一层，我们统一层只想保留一个
            copy[this.level]= item
            copy.splice(this.level+1)
            this.$emit('update:selected',copy)
        },
        onUpdateSelected(val){
            this.$emit('update:selected',val)
        }
    }
}

实现动态数据层级选择

首先从github上引入一个数据库https://github.com/eduosi/district/blob/master/district-full.csv，然后把它通过JSON转化工具转化成JSON格式，创建一个本地db.js，通过封装一个promise实现传入一个id获取到相应的子级，然后通过外层传入一个loadData函数，通过loadData获取到你点击的item，然后拿到对应的id，调用你的promise，成功后通过一个回调渲染我们的页面

demo.vue

<template>
    <div>
        <div style="padding: 20px;">
            <g-cascader :source.sync="source" height="200px" :selected.sync="selected"
             :loadData="loadData"
            ></g-cascader>
        </div>
    </div>
</template>
data(){
            return {
                source: [

                ],
                selected: [],
            }
        },
        methods: {
            loadData(node,fn){
                let {id}=node
                this.ajax(id).then((result)=>{
                    fn(result)
                })
            },
            ajax(id=0){
                return new Promise((resolve,reject)=>{
                    let result = db.filter(item=>item.parent_id === id)
                    result.map(node=>{
                        //如果数据库里有对应的对象的id等于当前节点的id，说明当前节点有children
                        if(db.filter(item=>item.parent_id === node.id).length > 0){
                            node.isLeaf = false
                        }else{
                            node.isLeaf = true
                        }

                    })
                    setTimeout(()=>{
                        resolve(result)
                    },300)
                })
            },
        },
        created() {

            this.ajax().then((result)=>{
                this.source = result
            })
        }
    }

cascader.vue

<div class="popover" v-if="popoverVisibility">
            <cascader-item :items="source" :style="{height}" :height="height" :selected="selected" :level="level"
<!--一直把这个loadData传给cascader-item-->
           @update:selected="onUpdateSelected" :loadData="loadData"
            ></cascader-item>
        </div>

props: {
        loadData: {
            type: Function
        }
    },
    computed: {
        result(){
            return this.selected.map(item=>{return item.name}).join('/')
        }
    },
    components: {CascaderItem},
    methods: {
        onUpdateSelected(val){
            this.$emit('update:selected',val)
            //因为你每次点击后都会把当前这个后面的都删掉，所以当前这个就是数组的最后一个也就是val[val.length-1]
            let lastVal = val[val.length-1]
            //当前的数据如果是第一层的话直接可以通过item.id===id拿到，如果是第二层就会是一个二维数组，所以你需要分别针对有没有children设置不同的函数获取它们对应的值
            let simplest = (children,id)=>{
                return children.filter(item=>item.id === id)[0]
            }
            let complex = (children,id)=>{
                let noChildren = []
                let hasChildren = []
                children.forEach(item=>{
                    if(item.children){
                        hasChildren.push(item)
                    }else{
                        noChildren.push(item)
                    }
                })
              //没有children的只需要使用simplest就可以拿到当前的
                let found = simplest(noChildren,id)
                if(found){
                    return found
                }else{
                    // 如果是有children我们先把它当做没children的找一遍，然后再对它里面
                    // 的children的每一项使用complex方法找一遍
                    found = simplest(hasChildren, id)
                    if(found){
                        return found
                    }else{
                        for(let i = 0;i<hasChildren.length;i++){
                            found = complex(hasChildren[i].children,id)
                            if(found){
                                return found
                            }
                        }
                        return undefined
                    }
                }
            }
            let updateSource = (result)=>{
                //source是props所以需要深拷贝
                let copy = JSON.parse(JSON.stringify(this.source))
              //拿到你点击元素的数据
                let toUpdate = complex(copy,lastVal.id)
                //给当前元素下面添加children值为你回调中获取的当前点击元素下的子元素
                toUpdate.children = result
                //触发一个update:source将拷贝后的source传出去
                this.$emit('update:source',copy)
            }
          //如果最后一个的isLeaf是false并且this.loadData存在就去获取数据
            if(!lastVal.isLeaf && this.loadData){
            
  //将你点击的元素和updateSource这个回调传进去
             this.loadData(lastVal,updateSource)
            }
        }
    }

cascader-items.vue

<template>
    <div class="cascader-item">
        <div class="left">
            <div class="label" v-for="item in items" @click="onSelected(item)" >
                <span class="name">{{item.name}}</span>
                <icon name="right" v-if="rightArrowVisible(item)"></icon>
            </div>
        </div>
        <div class="right" v-if="rightItems">
            <gulu-cascader-item :items="rightItems" :style="{height}" :height="height" :selected="selected" :level="level+1"
              @update:selected="onUpdateSelected" :loadData="loadData"
            ></gulu-cascader-item>
        </div>
    </div>
</template>
props: {
        items: {
            type: Array
        },
        height: {
            type: String
        },
        selected: {
            type: Array,
            default: ()=>{return []}
        },
        level: {
            type: Number,
            default: 0
        },
        loadData: {
            type: Function
        }
    },
computed: {
        rightItems(){
            if(this.selected[this.level]){
                let selected = this.items.filter((item)=>item.name === this.selected[this.level].name)
                if(selected && selected[0].children&&selected[0].children.length > 0){
                    return selected[0].children
                }
            }
        }
    },
    components: {
        Icon
    },
methods: {
rightArrowVisible(item){
//如果this.loadData存在的话也就是用动态数据，那么就是!item.isLeaf的时候显示箭头，否则就是item下有children显示
            return this.loadData ? !item.isLeaf : item.children
        }
}

点击外侧关闭显示层

方法1：点击的时候添加一个docuemnt事件监听，因为会有冒泡，所以事件监听需要在this.$nextTick下写，然后给这个事件监听的函数传一个原生参数，拿到e.target根据它判断属不属于cascader里面，如果属于就什么都不干，否则就关闭

<template>
    <div class="cascader" ref="a" >
        <div class="trigger" @click="toggle">
            {{result || '&nbsp;'}}
        </div>
        <div class="popover" v-if="popoverVisibility">
            <cascader-item :items="source" :style="{height}" :height="height" :selected="selected" :level="level"
            @update:selected="onUpdateSelected" :loadData="loadData"
            ></cascader-item>
        </div>
    </div>
</template>
documentClik(e){
            let cascader = this.$refs.a
            if(cascader.contains(e.target)){
                return
            }else{
                this.close()
            }
        },
        close(){
            this.popoverVisibility = false
            document.removeEventListener('click',this.toggle)
        },
        open(){
            this.popoverVisibility = true
            this.$nextTick(()=>{
                document.addEventListener('click',this.documentClik)
            })
        },
        toggle(){
            if(this.popoverVisibility){
                this.close()
            }else{
                this.open()
            }
        }

方法2：通过自定义指令给cascader最外层添加一个click-outside指令，实现点击组件外关闭

click-outside.js

export default {
    // 当被绑定的元素插入到 DOM 中时……
    bind: function (el, binding, vnode) {
        document.addEventListener('click',(e)=>{
            let {target} =e
            if(el === target || el.contains(target)){
                return
            }
            //拿到你指令中传入的值，这里是close函数
            binding.value()
        })
    }
}

cascader.vue

<div class="cascader" v-click-outside="close">

</div>
import clickOutside from './click-outside.js'
directives: {clickOutside}
close(){
            this.popoverVisibility = false
        },
        open(){
            this.popoverVisibility = true
        },
        toggle(){
            if(this.popoverVisibility){
                this.close()
            }else{
                this.open()
            }
        }

问题：上面的写法，如果有多个cascader就会有多个监听器
解决办法：让页面刚加载的时候就添加一个监听事件，声明一个空数组，每次绑定指令的时候给这个数组里添加一个对象{el:el,callback:callback}，然后在最开始的监听事件里遍历这个数组，看看数组里面的每一项中是否有el===e.target或者el.containes(e.target)，如果有就直接return，否则就调用这一项的callback

click-outside.js

let onClickDocument = (e)=>{
    let {target} = e
    arr.forEach(item=>{
        if(item.el === target || item.el.contains(target)){
            return
        }
        item.callback()
    })
}
document.addEventListener('click',onClickDocument)
let arr = []
export default {
    // 当被绑定的元素插入到 DOM 中时……
    bind: function (el, binding, vnode) {
        arr.push({el,callback:binding.value})
    }
}

实现点击数据未渲染完成时的loading状态

实现方法：通过拿到在cascader里给cascader-item传入一个loadingItem属性，一开始是一个空对象，然后点击当前层级的某一项拿到selected数组里的最后一项赋值给这个loadingItem，通过点击的当前item.name等不等于loadingItem.name来判断是否显示loading，如果相等就显示否则就显示箭头，然后数据获取成功在updateSource 中将loadingItem变为空对象

cascader.vue

<div class="popover" v-if="popoverVisibility">
            <cascader-item :items="source" :style="{height}" :height="height" :selected="selected" :level="level"
            @update:selected="onUpdateSelected" :loadData="loadData" :loadItem="loadItem"
            ></cascader-item>
        </div>
data(){
        return {
            loadItem: {}
        }
    },
methods: {
        onUpdateSelected(val){
            let lastVal = val[val.length-1]
            this.loadItem = lastVal   
            let updateSource = (result)=>{
                this.loadItem={}
            }

cascader-item.vue

<div class="label" v-for="(item,index) in items" @click="onSelected(item,index)" :class="{active: currentItem === index}">
                <span class="name">{{item.name}}</span>
                <div class="icons" v-if="rightArrowVisible(item)">
                    <template v-if="loadItem.name === item.name">
                        <icon name="loading" class="loading"></icon>
                    </template>
                    <template v-else>
                        <icon name="right" class="next"></icon>
                    </template>
                </div>

            </div>
<div class="right" v-if="rightItems">
            <gulu-cascader-item :items="rightItems" :style="{height}" :height="height" :selected="selected" :level="level+1"
              @update:selected="onUpdateSelected" :loadData="loadData" :loadItem="loadItem"
            ></gulu-cascader-item>
        </div>
props: {
  loadItem: {
            type: Object
        }
}

实现点击选中，展开后仍然是对应的项添加选中状态

实现：首先要将我们可选择的各省市区原来使用的v-if改为v-show，因为这样的话才会不会去重新渲染，然后通过你之前点击对应项把当前的项添加到selected里，然后通过当前的name来找selected里是否有这个name来判断是否要添加这个选中的类，因为我们的selected里的item是对象，而对象没法使用indexOf，所以这里我们单独把selected里的name添加到一个新的数组里，之后判断这个数组里是否存在我们当前项的name

cascader-items.vue

<template>
  <div class="left">
    <div class="label" v-for="item in items" @click="onSelected(item)"
                 :class="{active: selectedName.indexOf(item.name) > -1}"
            >
      <span class="name">{{item.name}}</span>
    </div>
  </div>
</template>
data(){
        return {
            selectedName: []
        }
    },
methods: {
  onSelected(item){
            let copy = JSON.parse(JSON.stringify(this.selected))
            //之所以写copy[this.level]是为了你点击当前层的每一个都让数组里只保留一个
            //而不是点一个就往数组里加一个，如果不写的话你点杭州数组里有一个杭州，再点福建
            //数组就会变成['杭州','福建']可这两个属于同一层，我们统一层只想保留一个
            copy[this.level]= item
            copy.splice(this.level+1)
            this.selectedName = copy.map(item1=>{
                //这时候this.selectedName=['杭州']
                return item1.name
            })
            this.$emit('update:selected',copy)
        },
}

最后编辑于：2019.02.16 23:32:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,793评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,567评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,342评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,825评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,814评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,680评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,033评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,687评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,175评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,668评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,775评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,419评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,020评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,206评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,092评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,510评论 2赞 343