無標(biāo)題文章

<template>

? <div class="home clearfix">

? ? <div class="f-left">

? ? ? <div class="edit-wrap-left edit-wrap block">

? ? ? ? <div class="edit-title">

? ? ? ? ? <div class="bar flex1">

? ? ? ? ? ? <span>工具欄</span>

? ? ? ? ? ? <span>素材區(qū)</span>

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ? <Tools class="edit-content" @addTool="addTool" />

? ? ? </div>

? ? </div>

? ? <div class="f-left main">

? ? ? <div class="tool-bar">

? ? ? ? <div class="tool-bar-left">

? ? ? ? ? <el-tooltip

? ? ? ? ? ? v-show="activeElem.type=='文字輸入?yún)^(qū)'"

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="輸入文字"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? >

? ? ? ? ? ? <el-input

? ? ? ? ? ? ? placeholder="輸入文字"

? ? ? ? ? ? ? class="txt-input"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ? v-model="activeElem.text"

? ? ? ? ? ? ? clearable

? ? ? ? ? ? ></el-input>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? v-show="activeElem.type=='文字輸入?yún)^(qū)'"

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="文字顏色"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? >

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="activeElem.color"

? ? ? ? ? ? ? @active-change="colorChange($event, '文字輸入?yún)^(qū)')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('borderColor')"

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="線條顏色"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? >

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="activeElem.borderColor"

? ? ? ? ? ? ? @active-change="colorChange($event, '邊框')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="背景顏色"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('backgroundColor')&&activeElem.name!='底圖'"

? ? ? ? ? >

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="activeElem.backgroundColor"

? ? ? ? ? ? ? @active-change="colorChange($event, '背景')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="底圖背景顏色"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.name=='底圖'"

? ? ? ? ? >

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="color"

? ? ? ? ? ? ? @active-change="colorChange($event, '全局背景顏色')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="線條寬度"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('borderSize')&&activeElem.name!='底圖'&&Object.prototype.toString.call(activeElem.borderSize)!='[object Undefined]'"

? ? ? ? ? >

? ? ? ? ? ? <el-input-number

? ? ? ? ? ? ? v-model="activeElem.borderSize"

? ? ? ? ? ? ? @change="sizeChange($event, '線條寬度')"

? ? ? ? ? ? ? :min="1"

? ? ? ? ? ? ? :max="200"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ></el-input-number>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('fontSize')&&Object.prototype.toString.call(activeElem.fontSize)!='[object Undefined]'"

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="字體大小"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? >

? ? ? ? ? ? <el-input-number

? ? ? ? ? ? ? v-model="activeElem.fontSize"

? ? ? ? ? ? ? @change="sizeChange($event, '文字')"

? ? ? ? ? ? ? :min="1"

? ? ? ? ? ? ? :max="500"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ></el-input-number>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="旋轉(zhuǎn)度數(shù)"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('rotate')&&Object.prototype.toString.call(activeElem.rotate)!='[object Undefined]'"

? ? ? ? ? >

? ? ? ? ? ? <!-- 須activeElem.rotate!==undefined, 因?yàn)橛?jì)數(shù)器組件會給{}自動加上屬性-->

? ? ? ? ? ? <el-popover placement="bottom" trigger="click">

? ? ? ? ? ? ? <el-input-number

? ? ? ? ? ? ? ? v-model="activeElem.rotate"

? ? ? ? ? ? ? ? @change="sizeChange($event, '度數(shù)')"

? ? ? ? ? ? ? ? :min="0"

? ? ? ? ? ? ? ? :max="360"

? ? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ? ></el-input-number>

? ? ? ? ? ? ? <i slot="reference" class="el-icon-refresh-right i-font"></i>

? ? ? ? ? ? </el-popover>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="底圖邊框"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.name=='底圖'"

? ? ? ? ? >

? ? ? ? ? ? <el-popover placement="bottom" trigger="click">

? ? ? ? ? ? ? <div class="flex1 flex1-item">

? ? ? ? ? ? ? ? <span class="flex1-item-name">外邊框：</span>

? ? ? ? ? ? ? ? <el-checkbox v-model="outerBorder" @change="borderChange($event, '外邊框')"></el-checkbox>

? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? <div class="flex1 flex1-item">

? ? ? ? ? ? ? ? <span class="flex1-item-name">大泻硗：</span>

? ? ? ? ? ? ? ? <el-input-number

? ? ? ? ? ? ? ? ? v-model="activeElem.bo"

? ? ? ? ? ? ? ? ? @change="sizeChange($event, '外邊框')"

? ? ? ? ? ? ? ? ? :min="1"

? ? ? ? ? ? ? ? ? :max="200"

? ? ? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ? ? ></el-input-number>

? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? <div class="flex1 flex1-item">

? ? ? ? ? ? ? ? <span class="flex1-item-name">顏色：</span>

? ? ? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? ? ? v-model="activeElem.borderColor"

? ? ? ? ? ? ? ? ? @active-change="colorChange($event, '邊框')"

? ? ? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? <!-- <el-color-picker

? ? ? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? ? ? v-model="outerBorderColor"

? ? ? ? ? ? ? ? ? @active-change="colorChange($event, '全局邊框')"

? ? ? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ? ? />-->

? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? <div

? ? ? ? ? ? ? ? slot="reference"

? ? ? ? ? ? ? ? :class="{isActive:activeElem.fontWeight==='bold'}"

? ? ? ? ? ? ? ? class="i-letter i-text"

? ? ? ? ? ? ? >邊框</div>

? ? ? ? ? ? </el-popover>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="加粗"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('fontWeight')"

? ? ? ? ? >

? ? ? ? ? ? <div

? ? ? ? ? ? ? @click="fontStyleHandle('fontWeight')"

? ? ? ? ? ? ? :class="{isActive:activeElem.fontWeight==='bold'}"

? ? ? ? ? ? ? class="i-letter bold"

? ? ? ? ? ? >B</div>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="斜體"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('fontStyle')"

? ? ? ? ? >

? ? ? ? ? ? <div

? ? ? ? ? ? ? @click="fontStyleHandle('fontStyle')"

? ? ? ? ? ? ? :class="{isActive:activeElem.fontStyle==='italic'}"

? ? ? ? ? ? ? class="i-letter italic"

? ? ? ? ? ? ? style="font-family: serif;font-size:25px;padding-right:5px"

? ? ? ? ? ? >I</div>

? ? ? ? ? </el-tooltip>

? ? ? ? ? <el-tooltip

? ? ? ? ? ? effect="dark"

? ? ? ? ? ? content="陰影效果"

? ? ? ? ? ? placement="bottom"

? ? ? ? ? ? v-show="activeElem.hasOwnProperty('backgroundColor')"

? ? ? ? ? >

? ? ? ? ? ? <el-popover class="shadow-wrap" width="150" placement="right" trigger="click">

? ? ? ? ? ? ? <!-- <div class="flex1 flex1-item"> -->

? ? ? ? ? ? ? <span>模糊程度：</span>

? ? ? ? ? ? ? <el-slider

? ? ? ? ? ? ? ? width="50"

? ? ? ? ? ? ? ? :min="0"

? ? ? ? ? ? ? ? :max="30"

? ? ? ? ? ? ? ? v-model="activeElem.shadow3"

? ? ? ? ? ? ? ? @change="shadowChange($event, '3')"

? ? ? ? ? ? ? ></el-slider>

? ? ? ? ? ? ? <!-- </div>

? ? ? ? ? ? ? <div class="flex1 flex1-item">-->

? ? ? ? ? ? ? <span>左右方向：</span>

? ? ? ? ? ? ? <el-slider

? ? ? ? ? ? ? ? :min="-100"

? ? ? ? ? ? ? ? :max="100"

? ? ? ? ? ? ? ? v-model="activeElem.shadow1"

? ? ? ? ? ? ? ? @change="shadowChange($event, '1')"

? ? ? ? ? ? ? ></el-slider>

? ? ? ? ? ? ? <!-- </div>

? ? ? ? ? ? ? <div class="flex1 flex1-item">-->

? ? ? ? ? ? ? <span>上下方向：</span>

? ? ? ? ? ? ? <el-slider

? ? ? ? ? ? ? ? :min="-100"

? ? ? ? ? ? ? ? :max="100"

? ? ? ? ? ? ? ? v-model="activeElem.shadow2"

? ? ? ? ? ? ? ? @change="shadowChange($event, '2')"

? ? ? ? ? ? ? ></el-slider>

? ? ? ? ? ? ? <!-- </div> -->

? ? ? ? ? ? ? <el-switch

? ? ? ? ? ? ? ? v-show="activeElem.hasOwnProperty('shadowDirection')"

? ? ? ? ? ? ? ? v-model="shadowDirection"

? ? ? ? ? ? ? ? active-value

? ? ? ? ? ? ? ? inactive-value="inset"

? ? ? ? ? ? ? ? active-text="外陰影"

? ? ? ? ? ? ? ? inactive-text="內(nèi)陰影"

? ? ? ? ? ? ? ? @change="shadowDirectionChange"

? ? ? ? ? ? ? ></el-switch>

? ? ? ? ? ? ? <div class="flex1 flex1-item">

? ? ? ? ? ? ? ? <span>陰影顏色：</span>

? ? ? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? ? ? v-model="activeElem.shadowColor"

? ? ? ? ? ? ? ? ? @active-change="colorChange($event, '陰影')"

? ? ? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? <div slot="reference" class="i-text i-font">陰影</div>

? ? ? ? ? ? </el-popover>

? ? ? ? ? </el-tooltip>

? ? ? ? </div>

? ? ? ? <div class="activeElem">

? ? ? ? ? 當(dāng)前選中元素：{{ activeElem.name

? ? ? ? ? }}

? ? ? ? ? <i @click="deleteElem" class="el-icon-delete"></i>

? ? ? ? </div>

? ? ? </div>

? ? ? <div class="edit-area">

? ? ? ? <div class="clearfix">

? ? ? ? ? <span class="f-left">400X400</span>

? ? ? ? </div>

? ? ? ? <!-- <canvas class="canvas_area"> -->

? ? ? ? <div

? ? ? ? ? class="pre-area"

? ? ? ? ? ref="pre_area"

? ? ? ? ? @click="gHandle($event)"

? ? ? ? ? :style="{boxShadow:dituObj.shadow1+'px '+dituObj.shadow2+'px '+dituObj.shadow3+'px '+dituObj.shadowColor+' '+dituObj.shadowDirection,backgroundColor:dituObj.backgroundColor,backgroundImage:'url(' + dituObj.backgroundImage + ')',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}"

? ? ? ? >

? ? ? ? ? <VueDragResize

? ? ? ? ? ? v-for="(item, i) in elemList"

? ? ? ? ? ? :w="item.w"

? ? ? ? ? ? :h="item.h"

? ? ? ? ? ? :x="item.x"

? ? ? ? ? ? :y="item.y"

? ? ? ? ? ? :z="item.zIndex"

? ? ? ? ? ? :isActive="item.isActive"

? ? ? ? ? ? :minw="1"

? ? ? ? ? ? :minh="1"

? ? ? ? ? ? :key="i+item.type"

? ? ? ? ? ? :parentLimitation="item.parentLimitation"

? ? ? ? ? ? @dragging="onDragging($event, item, i)"

? ? ? ? ? ? @deactivated="onDeactivated($event, item)"

? ? ? ? ? ? @resizing="changeSize($event, item, i)"

? ? ? ? ? ? @activated="onActivated($event, item, i)"

? ? ? ? ? ? @mousedown.native="mouthDown($event, item, i)"

? ? ? ? ? ? @mouseup.native="mouthUp($event, item, i)"

? ? ? ? ? >

? ? ? ? ? ? <div

? ? ? ? ? ? ? :style="{boxShadow:item.shadow1+'px '+item.shadow2+'px '+item.shadow3+'px '+item.shadowColor+' '+item.shadowDirection,transform:'rotate('+item.rotate+'deg)',backgroundColor:item.backgroundColor,backgroundImage:'url(' + item.backgroundImage + ')',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}"

? ? ? ? ? ? ? class="dian"

? ? ? ? ? ? ? v-if="item.type == '點(diǎn)/圓'"

? ? ? ? ? ? ></div>

? ? ? ? ? ? <div

? ? ? ? ? ? ? :style="{boxShadow:item.shadow1+'px '+item.shadow2+'px '+item.shadow3+'px '+item.shadowColor+' '+item.shadowDirection,transform:'rotate('+item.rotate+'deg)',backgroundColor:item.backgroundColor,backgroundImage:'url(' + item.backgroundImage + ')',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}"

? ? ? ? ? ? ? class="zhixian"

? ? ? ? ? ? ? v-if="item.type == '直線'"

? ? ? ? ? ? ></div>

? ? ? ? ? ? <div

? ? ? ? ? ? ? class="inner-area"

? ? ? ? ? ? ? v-if="item.type == '文字輸入?yún)^(qū)'"

? ? ? ? ? ? ? :style="{fontStyle:item.fontStyle,fontWeight:item.fontWeight,textShadow:item.shadow1+'px '+item.shadow2+'px '+item.shadow3+'px '+item.shadowColor,transform:'rotate('+item.rotate+'deg)',color:item.color,fontSize:item.fontSize+'px',backgroundColor:item.backgroundColor,backgroundImage:'url(' + item.backgroundImage + ')',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}"

? ? ? ? ? ? >{{ item.text }}</div>

? ? ? ? ? ? <div

? ? ? ? ? ? ? :style="{boxShadow:item.shadow1+'px '+item.shadow2+'px '+item.shadow3+'px '+item.shadowColor+' '+item.shadowDirection,transform:'rotate('+item.rotate+'deg)',border: item.borderSize + 'px solid ' + item.borderColor,backgroundColor:item.backgroundColor,backgroundImage:'url(' + item.backgroundImage + ')',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}"

? ? ? ? ? ? ? class="yuanquan"

? ? ? ? ? ? ? v-if="item.type == '圓圈'"

? ? ? ? ? ? ></div>

? ? ? ? ? ? <div

? ? ? ? ? ? ? :style="{boxShadow:item.shadow1+'px '+item.shadow2+'px '+item.shadow3+'px '+item.shadowColor+' '+item.shadowDirection,transform:'rotate('+item.rotate+'deg)',border: item.borderSize + 'px solid ' + item.borderColor,transform:'rotate('+item.rotate+'deg)',backgroundColor:item.backgroundColor,backgroundImage:'url(' + item.backgroundImage + ')',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}"

? ? ? ? ? ? ? class="zhengfangxing"

? ? ? ? ? ? ? v-if="item.type == '正方形'"

? ? ? ? ? ? ></div>

? ? ? ? ? </VueDragResize>

? ? ? ? </div>

? ? ? ? <!-- </canvas> -->

? ? ? ? <div class="nowelem">

? ? ? ? ? <span class="f-left">X:{{ activeElem.x }},Y:{{ activeElem.y }}</span>

? ? ? ? ? <span class="f-right">寬:{{ activeElem.w }},高:{{ activeElem.h }}</span>

? ? ? ? </div>

? ? ? ? <el-button class="createImg" type="primary" size="mini" plain @click="createImg">免費(fèi)下載圖片</el-button>

? ? ? </div>

? ? ? <div class="edit-area-bottom block">

? ? ? ? <div class="edit-title">全局處理區(qū)</div>

? ? ? ? <div class="edit-content">

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">形狀：</div>

? ? ? ? ? ? <el-select

? ? ? ? ? ? ? v-model="outerShape"

? ? ? ? ? ? ? @change="shapeChange($event, 'outerBorder')"

? ? ? ? ? ? ? placeholder="選擇形狀"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? >

? ? ? ? ? ? ? <el-option

? ? ? ? ? ? ? ? v-for="item in shapeOpts"

? ? ? ? ? ? ? ? :key="item.value"

? ? ? ? ? ? ? ? :label="item.label"

? ? ? ? ? ? ? ? :value="item.value"

? ? ? ? ? ? ? ></el-option>

? ? ? ? ? ? </el-select>

? ? ? ? ? </div>

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">背景顏色：</div>

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="color"

? ? ? ? ? ? ? @active-change="colorChange($event, '全局背景顏色')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? ? <!-- <div class="item-name">背景圖：</div> -->

? ? ? ? ? ? <!-- <el-button size="mini" @click="colorChange($event, '全局背景圖片')" plain type="primary">使用</el-button> -->

? ? ? ? ? </div>

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">

? ? ? ? ? ? ? 外邊框：

? ? ? ? ? ? ? <el-checkbox v-model="outerBorder" @change="borderChange($event, '外邊框')"></el-checkbox>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="item-name">大芯湎病：</div>

? ? ? ? ? ? <el-input-number

? ? ? ? ? ? ? v-model="outerBorderWidth"

? ? ? ? ? ? ? @change="sizeChange($event, '外邊框')"

? ? ? ? ? ? ? :min="1"

? ? ? ? ? ? ? :max="200"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? ></el-input-number>

? ? ? ? ? ? <div class="item-name">顏色：</div>

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="outerBorderColor"

? ? ? ? ? ? ? @active-change="colorChange($event, '全局邊框')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? </div>

? ? ? ? ? <!-- <el-form-item label="陰影效果："> -->

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">陰影（模糊程度）：</div>

? ? ? ? ? ? <el-slider :min="0" :max="400" v-model="gshadow3" @change="gshadowChange"></el-slider>

? ? ? ? ? </div>

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">陰影（左右方向）：</div>

? ? ? ? ? ? <el-slider :min="-100" :max="100" v-model="gshadow2" @change="gshadowChange"></el-slider>

? ? ? ? ? </div>

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">陰影（上下方向）：</div>

? ? ? ? ? ? <el-slider :min="-100" :max="100" v-model="gshadow1" @change="gshadowChange"></el-slider>

? ? ? ? ? </div>

? ? ? ? ? <div class="item">

? ? ? ? ? ? <div class="item-name">陰影顏色：</div>

? ? ? ? ? ? <el-color-picker

? ? ? ? ? ? ? show-alpha

? ? ? ? ? ? ? v-model="gshadowColor"

? ? ? ? ? ? ? @active-change="colorChange($event,'全局陰影')"

? ? ? ? ? ? ? size="mini"

? ? ? ? ? ? />

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? </div>

? ? </div>

? ? <!-- <div class="img-mask" v-if="imgUrl">

? ? ? <div class="img-wrap">

? ? ? ? <img :src="imgUrl" alt />

? ? ? ? <i @click="imgUrl=''" class="el-icon-circle-close"></i>

? ? ? </div>

? ? </div>-->

? </div>

</template>

<script>

import VueDragResize from 'vue-drag-resize'

import html2canvas from 'html2canvas'

import Tools from '../components/Tools'

import { userDevice } from '../utils/fun.js'

export default {

? name: 'Home',

? components: {

? ? VueDragResize, Tools

? },

? data () {

? ? return {

? ? ? elemList: [

? ? ? ? { name: '文字輸入?yún)^(qū)', isActive: true, type: '文字輸入?yún)^(qū)', parentLimitation: true, text: '文字輸入?yún)^(qū)', w: 80, h: 40, x: 150, y: 150, zIndex: 1, color: '#000', fontSize: 20, backgroundColor: '', backgroundImage: '', rotate: 0, shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', fontWeight: 'normal', fontStyle: '' },

? ? ? ? { name: '文字輸入?yún)^(qū)', isActive: false, type: '文字輸入?yún)^(qū)', area: 'tool-area', text: '文字輸入?yún)^(qū)', parentLimitation: true, w: 80, h: 40, x: -130, y: 39, zIndex: 1, color: '#000', fontSize: 20, backgroundColor: '', backgroundImage: '', rotate: 0, shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', fontWeight: 'normal', fontStyle: '' },

? ? ? ? { name: '點(diǎn)/圓', isActive: false, type: '點(diǎn)/圓', area: 'tool-area', parentLimitation: false, w: 10, h: 10, x: -100, y: 98, zIndex: 1, backgroundColor: '#000', backgroundImage: '', rotate: 0, shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', shadowDirection: '' },

? ? ? ? { name: '直線', isActive: false, type: '直線', area: 'tool-area', parentLimitation: false, w: 50, h: 2, x: -110, y: 141, zIndex: 1, rotate: 0, backgroundColor: '#000', backgroundImage: '', shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', shadowDirection: '' },

? ? ? ? { name: '圓圈', isActive: false, type: '圓圈', area: 'tool-area', parentLimitation: false, w: 30, h: 30, x: -110, y: 168, zIndex: 1, borderColor: '#000', borderSize: 1, backgroundColor: '', backgroundImage: '', rotate: 0, shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', shadowDirection: '' },

? ? ? ? { name: '正方形', isActive: false, type: '正方形', area: 'tool-area', parentLimitation: false, w: 30, h: 30, x: -110, y: 205, zIndex: 1, borderColor: '#000', borderSize: 1, rotate: 0, backgroundColor: '', backgroundImage: '', shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', shadowDirection: '' }

? ? ? ],

? ? ? fileList: [],

? ? ? maxIndex: 1,

? ? ? activeElem: {},

? ? ? dituObj: {

? ? ? ? name: '底圖', type: '底圖', borderColor: '#000', borderSize: 1, backgroundColor: '', backgroundImage: '', rotate: 0, shadow1: 0, shadow2: 0, shadow3: 0, shadowColor: '#000', shadowDirection: ''

? ? ? },

? ? ? outerShape: '正方形',

? ? ? fontBorderShape: '',

? ? ? shapeOpts: [

? ? ? ? {

? ? ? ? ? value: '正方形',

? ? ? ? ? div: '正方形'

? ? ? ? },

? ? ? ? {

? ? ? ? ? value: '圓形',

? ? ? ? ? div: '圓形'

? ? ? ? }

? ? ? ],

? ? ? fontBorderShapeOpts: [

? ? ? ? {

? ? ? ? ? value: '圓形',

? ? ? ? ? div: '圓形'

? ? ? ? }, {

? ? ? ? ? value: '方形',

? ? ? ? ? div: '方形'

? ? ? ? }

? ? ? ],

? ? ? fontOpts: [

? ? ? ? {

? ? ? ? ? value: '常規(guī)',

? ? ? ? ? div: '常規(guī)'

? ? ? ? }, {

? ? ? ? ? value: '微軟雅黑',

? ? ? ? ? div: '微軟雅黑'

? ? ? ? }, {

? ? ? ? ? value: '宋體',

? ? ? ? ? div: '宋體'

? ? ? ? }, {

? ? ? ? ? value: '楷體',

? ? ? ? ? div: '楷體'

? ? ? ? }, {

? ? ? ? ? value: '隸書',

? ? ? ? ? div: '隸書'

? ? ? ? }

? ? ? ],

? ? ? color: '#fff',

? ? ? outerBorder: false,

? ? ? outerBorderWidth: 5,

? ? ? outerBorderColor: '#000',

? ? ? gshadow1: 0, // 全局陰影

? ? ? gshadow2: 0,

? ? ? gshadow3: 0,

? ? ? gshadowColor: '',

? ? ? imgUrl: '',

? ? ? shadowDirection: ''

? ? }

? },

? methods: {

? ? gHandle (e) {

? ? ? if (e.target.className === 'pre-area') {

? ? ? ? this.activeElem = this.dituObj

? ? ? }

? ? },

? ? colorChange (val, type) {

? ? ? console.log(12343, val, type)

? ? ? if (type === '文字輸入?yún)^(qū)') {

? ? ? ? this.activeElem.color = val

? ? ? } else if (type === '邊框') {

? ? ? ? this.activeElem.borderColor = val

? ? ? } else if (type === '背景') {

? ? ? ? this.activeElem.backgroundImage = ''

? ? ? ? this.activeElem.backgroundColor = val

? ? ? } else if (type === '陰影') {

? ? ? ? this.activeElem.shadowColor = val

? ? ? } else if (type === '全局背景顏色') {

? ? ? ? this.color = val

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? dom.style.backgroundImage = ''

? ? ? ? dom.style.backgroundColor = val

? ? ? } else if (type === '全局邊框') {

? ? ? ? this.outerBorderColor = val

? ? ? ? if (!this.outerBorder) return

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? dom.style.border = this.outerBorderWidth + 'px solid ' + this.outerBorderColor

? ? ? } else if (type === '全局陰影') {

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? dom.style.boxShadow = this.gshadow1 + 'px ' + this.gshadow2 + 'px ' + this.gshadow3 + 'px ' + this.gshadowColor + ' inset'

? ? ? }

? ? },

? ? rotateRadusChange (val) {

? ? ? this.activeElem.rotate = val

? ? },

? ? sizeChange (val, type) {

? ? ? console.log(123)

? ? ? if (type === '文字') {

? ? ? ? this.activeElem.fontSize = val

? ? ? } else if (type === '線條寬度') {

? ? ? ? this.activeElem.borderSize = val

? ? ? } else if (type === '度數(shù)') {

? ? ? ? this.activeElem.rotate = val

? ? ? } else if (type === '外邊框' && this.outerBorder) {

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? dom.style.border = this.outerBorderWidth + 'px solid ' + this.outerBorderColor

? ? ? }

? ? },

? ? fontStyleHandle (type) {

? ? ? if (type === 'fontWeight') {

? ? ? ? this.activeElem.fontWeight === 'bold' ? this.activeElem.fontWeight = 'normal' : this.activeElem.fontWeight = 'bold'

? ? ? } else {

? ? ? ? this.activeElem.fontStyle === 'italic' ? this.activeElem.fontStyle = '' : this.activeElem.fontStyle = 'italic'

? ? ? }

? ? },

? ? shapeChange (val, type) {

? ? ? console.log(val)

? ? ? if (type === 'outerBorder') {

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? if (val === '圓形') {

? ? ? ? ? dom.style.width = '400px'

? ? ? ? ? dom.style.height = '400px'

? ? ? ? ? dom.style.borderRadius = '50%'

? ? ? ? } else if (val === '正方形') {

? ? ? ? ? dom.style.width = '400px'

? ? ? ? ? dom.style.height = '400px'

? ? ? ? ? dom.style.borderRadius = ''

? ? ? ? }

? ? ? } else if (type === 'fontBorder') {

? ? ? ? const dom = document.getElementsByClassName('inner-area')[0]

? ? ? ? if (val === '圓形') {

? ? ? ? ? dom.style.borderRadius = '50%'

? ? ? ? } else if (val === '方形') {

? ? ? ? ? dom.style.borderRadius = ''

? ? ? ? }

? ? ? }

? ? },

? ? fontChange (val) {

? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? if (val === '常規(guī)') {

? ? ? ? dom.style.fontFamily = ''

? ? ? } else if (val === '微軟雅黑') {

? ? ? ? dom.style.fontFamily = 'Microsoft YaHei'

? ? ? } else if (val === '宋體') {

? ? ? ? dom.style.fontFamily = 'SimSun'

? ? ? } else if (val === '楷體') {

? ? ? ? dom.style.fontFamily = 'KaiTi'

? ? ? } else if (val === '隸書') {

? ? ? ? dom.style.fontFamily = 'LiSu'

? ? ? }

? ? },

? ? borderChange (bool, type) {

? ? ? if (type === '外邊框') {

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? if (bool) {

? ? ? ? ? dom.style.border = this.outerBorderWidth + 'px solid ' + this.outerBorderColor

? ? ? ? } else {

? ? ? ? ? dom.style.border = ''

? ? ? ? }

? ? ? }

? ? },

? ? shadowChange (val, i) {

? ? ? this.activeElem['shadow' + i] = val

? ? },

? ? gshadowChange () {

? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? dom.style.boxShadow = this.gshadow1 + 'px ' + this.gshadow2 + 'px ' + this.gshadow3 + 'px ' + this.gshadowColor + ' inset'

? ? },

? ? shadowDirectionChange (val) {

? ? ? console.log(val)

? ? ? if (val === 'inset') {

? ? ? ? this.activeElem.shadowDirection = val

? ? ? } else {

? ? ? ? this.activeElem.shadowDirection = ''

? ? ? }

? ? ? console.log(this.activeElem)

? ? },

? ? beforeUpload (file) {

? ? ? console.log(file, 'file')

? ? ? if (file.type !== 'image/jpg' && file.type !== 'image/png' && file.type !== 'image/jpeg') {

? ? ? ? this.$message.error('上傳圖片只能是 JPG/PNG 格式!')

? ? ? ? return false

? ? ? }

? ? ? if (file.size / 1024 / 1024 > 2) {

? ? ? ? this.$message.error('上傳圖片大小不能超過 2MB!')

? ? ? ? return false

? ? ? }

? ? ? const fr = new FileReader()

? ? ? fr.readAsDataURL(file)

? ? ? fr.onload = (e) => {

? ? ? ? this.fileList.push(e.target.result)

? ? ? }

? ? ? console.log(this.fileList, 'fileList')

? ? },

? ? setBgImg (type, n) {

? ? ? console.log(type, n)

? ? ? if (type === '選中') {

? ? ? ? this.activeElem.backgroundColor = ''

? ? ? ? this.activeElem.backgroundImage = n

? ? ? } else if (type === '全局') {

? ? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? ? dom.style.backgroundImage = 'url(' + n + ')'

? ? ? ? dom.style.backgroundSize = '100% 100%'

? ? ? ? dom.style.backgroundRepeat = 'no-repeat'

? ? ? }

? ? },

? ? handleExceed (files, fileList) {

? ? ? this.$message.warning(`每次限制選擇 3 個(gè)文件胰耗，本次選擇了 ${files.length} 個(gè)文件`)

? ? },

? ? createImg () {

? ? ? window.scrollTo(0, 0)

? ? ? console.log(window.scrollX)

? ? ? const canvas = document.createElement('canvas')

? ? ? // const canva = document.getElementsByClassName('canvas_area')[0]

? ? ? const dom = document.getElementsByClassName('pre-area')[0]

? ? ? const width = dom.offsetWidth // 獲取dom 寬度

? ? ? const height = dom.offsetHeight // 獲取dom 高度

? ? ? const scale = 2 // 定義任意放大倍數(shù) 支持小數(shù)

? ? ? canvas.getContext('2d').scale(scale, scale) // 獲取context,設(shè)置scale

? ? ? const rect = dom.getBoundingClientRect() // 獲取元素相對于視口的

? ? ? console.log(rect, 'rect')

? ? ? // const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 獲取滾動軸滾動的長度

? ? ? const opts = {

? ? ? ? // canvas: canva,

? ? ? ? x: rect.left, // 繪制的dom元素相對于視口的位置

? ? ? ? y: rect.top,

? ? ? ? // scrollX: 0, // 滾動的長度

? ? ? ? // scrollY: 0,

? ? ? ? scale: scale, // 添加的scale 參數(shù)

? ? ? ? width: width, // dom 原始寬度

? ? ? ? height: height,

? ? ? ? useCORS: true, // 開啟跨域

? ? ? ? dpi: window.devicePixelRatio * 2

? ? ? }

? ? ? // return

? ? ? this.$nextTick(() => {

? ? ? ? (window.html2canvas || html2canvas)(dom, opts).then(canvas => {

? ? ? ? ? const context = canvas.getContext('2d')

? ? ? ? ? // 關(guān)閉抗鋸齒

? ? ? ? ? context.mozImageSmoothingEnabled = false

? ? ? ? ? context.msImageSmoothingEnabled = false

? ? ? ? ? context.imageSmoothingEnabled = false

? ? ? ? ? // 轉(zhuǎn)成圖片，生成圖片地址

? ? ? ? ? this.imgUrl = canvas.toDataURL('image/png')

? ? ? ? ? if (userDevice() === 'mobile') {

? ? ? ? ? } else {

? ? ? ? ? ? const a = document.createElement('a') // 生成一個(gè)a元素

? ? ? ? ? ? const event = new MouseEvent('click') // 創(chuàng)建一個(gè)單擊事件

? ? ? ? ? ? a.download = name || 'photo' // 設(shè)置圖片名稱

? ? ? ? ? ? a.href = this.imgUrl // 將生成的URL設(shè)置為a.href屬性

? ? ? ? ? ? a.dispatchEvent(event)

? ? ? ? ? }

? ? ? ? }).catch(err => {

? ? ? ? ? console.log(err, 'err')

? ? ? ? })

? ? ? })

? ? },

? ? addTool (type) {

? ? ? let el

? ? ? if (type === '文字輸入?yún)^(qū)') {

? ? ? ? el = { name: '文字輸入?yún)^(qū)', isActive: true, type: '文字輸入?yún)^(qū)', parentLimitation: true, text: '文字輸入?yún)^(qū)', w: 80, h: 40, x: 150, y: 150, zIndex: 1, color: '#000', fontSize: 20, backgroundColor: '', backgroundImage: '', fontWeight: 'normal' }

? ? ? } else if (type === '點(diǎn)/圓') {

? ? ? ? el = { name: '點(diǎn)/圓', isActive: true, type: '點(diǎn)/圓', area: 'tool-area', parentLimitation: false, w: 10, h: 10, x: -100, y: 98, zIndex: 1, backgroundColor: '#000', backgroundImage: '' }

? ? ? } else if (type === '直線') {

? ? ? ? el = { name: '直線', isActive: true, type: '直線', area: 'tool-area', parentLimitation: false, w: 50, h: 2, x: -110, y: 141, zIndex: 1, rotate: '', backgroundColor: '#000', backgroundImage: '' }

? ? ? } else if (type === '圓圈') {

? ? ? ? el = { name: '圓圈', isActive: true, type: '圓圈', area: 'tool-area', parentLimitation: false, w: 30, h: 30, x: -110, y: 168, zIndex: 1, borderColor: '#000', borderSize: 1, backgroundImage: '' }

? ? ? } else if (type === '正方形') {

? ? ? ? el = { name: '正方形', isActive: true, type: '正方形', area: 'tool-area', parentLimitation: false, w: 30, h: 30, x: -110, y: 205, zIndex: 1, borderColor: '#000', borderSize: 1, rotate: '', backgroundImage: '' }

? ? ? }

? ? ? this.elemList.push(el)

? ? },

? ? deleteElem () {

? ? ? console.log(this.elemList, 1)

? ? ? this.elemList.splice(this.activeIndex, 1)

? ? ? console.log(this.elemList, 2)

? ? },

? ? onActivated (e, item, i) {

? ? },

? ? mouthDown (e, item, i) {

? ? ? console.log('mouthDown', item.name, this.elemList)

? ? ? this.elemList.forEach(el => {

? ? ? ? el.isActive = false

? ? ? })

? ? ? item.isActive = true

? ? ? this.maxIndex += 1

? ? ? item.zIndex = this.maxIndex

? ? ? this.activeIndex = i

? ? ? console.log('onActivated')

? ? ? this.activeElem = item

? ? ? //? if (item.area === 'tool-area' && e.left >= 0 && e.left <= 400 && e.top >= 0 && e.top <= 400) {

? ? ? //? ? item.parentLimitation = true

? ? ? //? }

? ? },

? ? mouthUp (e, item, i) {

? ? },

? ? onDragging (e, item) {

? ? ? console.log('onDragging', item.name, e, this.elemList)

? ? ? item.x = e.left

? ? ? item.y = e.top

? ? ? item.w = e.width

? ? ? item.h = e.height

? ? },

? ? onDeactivated (e, item) {

? ? ? // console.log(e, item, 'onDeactivated')

? ? ? item.isActive = false

? ? ? //? if (item.area === 'tool-area' && e.left >= 0 && e.left <= 400 && e.top >= 0 && e.top <= 400) {

? ? ? //? ? item.parentLimitation = true

? ? ? //? ? this.elemList.push(Object.assign(item))

? ? ? //? }

? ? },

? ? changeSize (e, item) {

? ? ? // 當(dāng)內(nèi)容超出輪廓線時(shí)會無法縮放，此時(shí)出發(fā)一次點(diǎn)擊即可縮放，原因不知

? ? ? console.log('changeSize', item.name, e, this.elemList)

? ? ? item.x = e.left

? ? ? item.y = e.top

? ? ? item.w = e.width

? ? ? item.h = e.height

? ? }

? },

? mounted () {

? ? console.log(this.activeElem, '1')

? }

}

</script>

<style lang="less">

.home {

? background-color: #f6f6f6;

? width: 960px;

? margin: 0 auto;

}

.img-mask {

? position: fixed;

? margin: 0;

? left: 0;

? right: 0;

? top: 0;

? bottom: 0;

? z-index: 9999;

? .img-wrap {

? ? position: absolute;

? ? left: 50%;

? ? top: 50%;

? ? transform: translate(-50%, -50%);

? ? .el-icon-circle-close {

? ? ? width: 30px;

? ? ? height: 30px;

? ? ? display: block;

? ? ? position: absolute;

? ? ? bottom: -30px;

? ? ? left: 50%;

? ? ? transform: translateX(-50%);

? ? }

? }

}

.main {

? display: flex;

? flex-direction: column;

? align-items: center;

? // justify-content: center;

? width: 680px;

}

.tool-bar {

? display: flex;

? justify-content: space-between;

? width: 100%;

? background: #fff;

? border-bottom: 1px solid rgba(57, 76, 96, 0.15);

? height: 48px;

? box-sizing: border-box;

? position: relative;

? .el-tooltip {

? ? margin-left: 10px;

? ? cursor: pointer;

? }

? .i-font {

? ? font-size: 23px;

? ? // cursor: pointer;

? ? line-height: 28px;

? }

? .i-letter {

? ? // cursor: pointer;

? ? font-size: 23px;

? ? min-width: 28px;

? ? height: 28px;

? ? line-height: 28px;

? ? box-sizing: border-box;

? ? border-radius: 4px;

? }

? .i-text {

? ? font-size: 14px;

? }

? .isActive {

? ? border: 1px solid #e6e6e6;

? }

? .shadow-wrap {

? ? font-size: 12px;

? }

? .activeElem {

? ? display: flex;

? ? align-items: center;

? }

}

.flex1-item {

? margin: 5px 0;

? // justify-content: space-between;

? align-items: center;

}

.flex1-item-name {

? min-width: 60px;

? text-align: right;

}

.tool-bar-left {

? display: flex;

? align-items: center;

}

.edit-area {

? margin-top: 30px;

}

.canvas_area {

? width: 400px;

? height: 400px;

}

.pre-area {

? width: 400px;

? height: 400px;

? background-color: #fff;

? word-break: break-all;

? // margin: 0 auto;

? display: flex;

? align-items: center;

? justify-content: center;

? font-size: 50px;

? line-height: 1;

? position: relative;

? box-sizing: border-box;

}

.vdr {

? div {

? ? width: 100%;

? ? height: 100%;

? }

}

.createImg {

? margin-top: 20px;

}

.nowelem {

? text-align: left;

}

.edit-wrap-left {

? margin: 23px 10px 0 0;

}

.edit-wrap-right {

? margin: 23px 0 0 10px;

}

.block {

? background-color: #fff;

? border: 1px solid #ebebeb;

? border-radius: 3px;

? transition: 0.2s;

? box-sizing: border-box;

? &:hover {

? ? box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),

? ? ? 0 2px 4px 0 rgba(232, 237, 250, 0.5);

? }

}

.edit-wrap {

? width: 270px;

? min-height: 400px;

}

.edit-title {

? font-size: 16px;

? padding: 5px;

? border-bottom: 1px solid #ebebeb;

? .bar {

? ? justify-content: space-around;

? }

}

.edit-content {

? padding: 10px;

}

.item {

? min-height: 30px;

? display: flex;

? align-items: center;

? margin: 5px 0;

? .el-slider {

? ? width: 200px;

? }

}

.item-name {

? font-size: 14px;

? // width: 80px;

? text-align: right;

? margin-left: 10px;

}

.txt-input {

? width: 100px !important;

}

.inner-area {

? display: flex;

? align-items: center;

? justify-content: center;

}

.dian {

? width: 10px;

? height: 10px;

? border-radius: 50%;

? background-color: #000;

}

.zhixian {

? width: 1px;

? height: 50px;

? background-color: #000;

}

.yuanquan {

? width: 50px;

? height: 50px;

? border: 1px solid #000;

? border-radius: 50%;

}

.zhengfangxing {

? width: 50px;

? height: 50px;

? border: 1px solid #000;

}

.upload-area {

? width: 270px;

? margin-top: 23px;

? min-height: 170px;

? img {

? ? max-width: 250px;

? ? height: 50px;

? ? margin: 5px;

? }

? .fileList {

? ? display: flex;

? ? flex-wrap: wrap;

? }

}

.el-form-item {

? margin-bottom: 0 !important;

}

.el-form-item__content {

? text-align: left;

? line-height: 30px !important;

}

.el-upload-list {

? display: none;

}

</style>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市箫措，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌衬潦，老刑警劉巖斤蔓，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異镀岛，居然都是意外死亡弦牡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門漂羊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來驾锰，“玉大人，你說我怎么就攤上這事走越⊥衷ィ” “怎么了？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵旨指，是天一觀的道長赏酥。 經(jīng)常有香客問我，道長谆构，這世上最難降的妖魔是什么裸扶？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮搬素，結(jié)果婚禮上呵晨，老公的妹妹穿的比我還像新娘魏保。我一直安慰自己，他們只是感情好摸屠，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布谓罗。 她就那樣靜靜地躺著，像睡著了一般餐塘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上皂吮，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天戒傻，我揣著相機(jī)與錄音，去河邊找鬼蜂筹。 笑死需纳，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的艺挪。 我是一名探鬼主播不翩，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼麻裳！你這毒婦竟也來了口蝠？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤津坑，失蹤者是張志新（化名）和其女友劉穎妙蔗，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體疆瑰，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡眉反，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了穆役。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寸五。...
    茶點(diǎn)故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖耿币，靈堂內(nèi)的尸體忽然破棺而出梳杏，到底是詐尸還是另有隱情，我是刑警寧澤淹接，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布秘狞，位于F島的核電站，受9級特大地震影響蹈集，放射性物質(zhì)發(fā)生泄漏烁试。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一拢肆、第九天 我趴在偏房一處隱蔽的房頂上張望减响。 院中可真熱鬧靖诗，春花似錦、人聲如沸支示。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽颂鸿。三九已至促绵，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間嘴纺，已是汗流浹背败晴。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留栽渴，地道東北人尖坤。 一個(gè)月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像闲擦，于是被迫代替她去往敵國和親慢味。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2贊 344

推薦閱讀更多精彩內(nèi)容

  • ### 1.安裝 nodejs ### 2.安裝 git ### 3.下載 [vue-element-admin]...
    gogogo_e6cf閱讀 356評論 0贊 0
  • # 內(nèi)容概述 ## 一. css特性 + 繼承 + 層疊 ### 1. CSS屬性的繼承 CSS中有些屬性是可繼承...
    Autism_8eaf閱讀 101評論 0贊 0
  • 頁面重構(gòu)與特效 整體感知 瀏覽器呈現(xiàn)頁面 瀏覽器（客戶端） HTTP協(xié)議 IP 域名 服務(wù)器 就是一臺電腦 數(shù)據(jù)庫...
    慌_e3f2閱讀 69評論 0贊 0
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵勝奧閱讀 4,764評論 0贊 1
  • # Readme 然后把下面的代碼隨便復(fù)制到一個(gè)文本編輯器中(比如記事本) 關(guān)鍵地方都有中文注釋, 替換題目:搜索...
    HandsomeCodeBoy閱讀 442評論 0贊 0