vue-editify 0.0.1

package/src/components/base/Tooltip.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="editify-tooltip" :class="{ block: block }" @mouseenter="showContent" @mouseleave="hideContent">
+		<div ref="target" class="editify-tooltip-target">
+			<slot></slot>
+		</div>
+		<Layer v-model="show" :node="node" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade">
+			<div class="editify-tooltip-content">{{ content }}</div>
+		</Layer>
+	</div>
+</template>
+<script>
+import Layer from './Layer'
+export default {
+	name: 'Tooltip',
+	props: {
+		//提示内容
+		content: {
+			type: String,
+			default: ''
+		},
+		//是否禁用
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		//是否块级
+		block: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			show: false,
+			node: null
+		}
+	},
+	components: {
+		Layer
+	},
+	methods: {
+		showContent() {
+			if (this.disabled) {
+				return
+			}
+			this.node = this.$refs.target
+			this.show = true
+		},
+		hideContent() {
+			if (this.disabled) {
+				return
+			}
+			this.show = false
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.editify-tooltip {
+	position: relative;
+	display: inline-block;
+
+	.editify-tooltip-target {
+		display: inline-block;
+	}
+
+	.editify-tooltip-content {
+		display: block;
+		padding: 6px 10px;
+		font-size: @font-size;
+		white-space: nowrap;
+	}
+
+	&.block {
+		display: block;
+
+		.editify-tooltip-target {
+			display: block;
+		}
+	}
+}
+</style>

package/src/components/base/Triangle.vue

@@ -0,0 +1,159 @@
+<template>
+	<div class="editify-triangle" :style="style" :data-editify-placement="placement">
+		<div class="editify-triangle-el" :style="elStyle"></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Triangle',
+	props: {
+		//位置
+		placement: {
+			type: String,
+			default: 'top',
+			validator(value) {
+				return ['top', 'left', 'right', 'bottom'].includes(value)
+			}
+		},
+		//边框颜色
+		color: {
+			type: String,
+			default: null
+		},
+		//背景色
+		background: {
+			type: String,
+			default: null
+		}
+	},
+	computed: {
+		style() {
+			if (this.placement == 'top') {
+				return {
+					borderBottomColor: this.color ? this.color : ''
+				}
+			}
+			if (this.placement == 'bottom') {
+				return {
+					borderTopColor: this.color ? this.color : ''
+				}
+			}
+			if (this.placement == 'left') {
+				return {
+					borderRightColor: this.color ? this.color : ''
+				}
+			}
+			if (this.placement == 'right') {
+				return {
+					borderLeftColor: this.color ? this.color : ''
+				}
+			}
+		},
+		elStyle() {
+			if (this.placement == 'top') {
+				return {
+					borderBottomColor: this.background ? this.background : ''
+				}
+			}
+			if (this.placement == 'bottom') {
+				return {
+					borderTopColor: this.background ? this.background : ''
+				}
+			}
+			if (this.placement == 'left') {
+				return {
+					borderRightColor: this.background ? this.background : ''
+				}
+			}
+			if (this.placement == 'right') {
+				return {
+					borderLeftColor: this.background ? this.background : ''
+				}
+			}
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.editify-triangle {
+	position: relative;
+	display: inline-block;
+	width: 0;
+	height: 0;
+	border-color: transparent;
+	border-style: solid;
+	border-width: @triangle-size;
+
+	.editify-triangle-el {
+		position: absolute;
+		display: inline-block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: calc(@triangle-size - 1px);
+	}
+
+	&[data-editify-placement='top'] {
+		border-top: none;
+		border-bottom-color: @border-color;
+
+		.editify-triangle-el {
+			border-top: none;
+			border-bottom-color: @background;
+			left: 1px;
+			top: 1.5px;
+			right: auto;
+			bottom: 0;
+			margin-left: -@triangle-size;
+		}
+	}
+
+	&[data-editify-placement='bottom'] {
+		border-bottom: none;
+		border-top-color: @border-color;
+
+		.editify-triangle-el {
+			border-bottom: none;
+			border-top-color: @background;
+			left: 1px;
+			bottom: 1.5px;
+			top: auto;
+			right: auto;
+			margin-left: -@triangle-size;
+		}
+	}
+
+	&[data-editify-placement='left'] {
+		border-left: none;
+		border-right-color: @border-color;
+
+		.editify-triangle-el {
+			border-left: none;
+			border-right-color: @background;
+			left: 1.5px;
+			top: 1px;
+			right: auto;
+			bottom: auto;
+			margin-top: -@triangle-size;
+		}
+	}
+
+	&[data-editify-placement='right'] {
+		border-right: none;
+		border-left-color: @border-color;
+
+		.editify-triangle-el {
+			border-right: none;
+			border-left-color: @background;
+			right: 1.5px;
+			top: 1px;
+			bottom: auto;
+			left: auto;
+			margin-top: -@triangle-size;
+		}
+	}
+}
+</style>

package/src/components/bussiness/Colors.vue

@@ -0,0 +1,138 @@
+<template>
+	<div class="editify-colors">
+		<div class="editify-colors-header" @click="selectColor({ value: '' })">
+			<Icon value="remove"></Icon>
+			<span>{{ $editTrans('defaultColor') }}</span>
+		</div>
+		<div class="editify-colors-list">
+			<div class="editify-color" :class="{ active: value == item.value }" v-for="item in data" :style="{ borderColor: value == item.value ? color : '' }">
+				<Tooltip block :content="item.label" :disabled="!tooltip">
+					<div @click="selectColor(item)" class="editify-color-el" :style="{ background: item.value }"></div>
+				</Tooltip>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import Icon from '../base/Icon'
+import Tooltip from '../base/Tooltip'
+export default {
+	name: 'Colors',
+	emits: ['change'],
+	props: {
+		//颜色数组
+		data: {
+			type: Array,
+			default: function () {
+				return []
+			}
+		},
+		//选中的颜色
+		value: {
+			type: String,
+			default: null
+		},
+		//激活状态颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		//是否使用工具提示
+		tooltip: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {}
+	},
+	inject: ['$editTrans'],
+	components: {
+		Icon,
+		Tooltip
+	},
+	methods: {
+		//选择颜色
+		selectColor(item) {
+			this.$emit('change', item.value)
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.editify-colors {
+	display: block;
+	color: @font-color;
+	font-size: @font-size;
+	padding: 6px 10px;
+	box-sizing: border-box;
+	width: 244px;
+
+	.editify-colors-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		position: relative;
+		padding: 6px 10px;
+		transform: all 200ms;
+		margin-bottom: 10px;
+		opacity: 0.8;
+
+		&::after {
+			content: '';
+			width: 100%;
+			height: 1px;
+			background-color: @background-darker;
+			position: absolute;
+			left: 0;
+			bottom: -5px;
+		}
+
+		:deep(.editify-icon) {
+			margin-right: 10px;
+		}
+
+		&:hover {
+			cursor: pointer;
+			background-color: @background-dark;
+			opacity: 1;
+		}
+
+		&:active {
+			opacity: 1;
+			background-color: @background-darker;
+		}
+	}
+
+	.editify-colors-list {
+		display: flex;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+
+		.editify-color {
+			display: block;
+			padding: 4px;
+			border: 1px solid transparent;
+			border-radius: 2px;
+
+			&.active {
+				border-color: @font-color-light;
+			}
+
+			.editify-color-el {
+				display: block;
+				width: 16px;
+				height: 16px;
+				border: 1px solid @border-color;
+				border-radius: 2px;
+				cursor: pointer;
+				transition: all 200ms;
+
+				&:hover {
+					transform: scale(1.2);
+				}
+			}
+		}
+	}
+}
+</style>

package/src/components/bussiness/InsertImage.vue

@@ -0,0 +1,316 @@
+<template>
+	<div class="editify-image">
+		<div class="editify-image-header">
+			<div @click="current = 'upload'" class="editify-image-header-item" :class="{ active: current == 'upload' }" :style="activeStyle('upload')">{{ $editTrans('uploadImage') }}</div>
+			<div @click="current = 'remote'" class="editify-image-header-item" :class="{ active: current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteImage') }}</div>
+			<div class="editify-image-header-slider" :class="current" :style="{ backgroundColor: color || '' }"></div>
+		</div>
+		<!-- 网络图片 -->
+		<div class="editify-image-remote" v-if="current == 'remote'">
+			<input v-model.trim="remoteUrl" :placeholder="$editTrans('imageUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
+			<div class="editify-image-remote-footer" :style="{ color: color }">
+				<span @click="insertRemoteImage">{{ $editTrans('insert') }}</span>
+			</div>
+		</div>
+		<!-- 上传图片 -->
+		<div class="editify-image-upload" v-else>
+			<Icon value="upload"></Icon>
+			<input :multiple="multiple" accept="image/*" @change="selectFile" type="file" />
+		</div>
+	</div>
+</template>
+<script>
+import Dap from 'dap-util'
+import Icon from '../base/Icon'
+export default {
+	name: 'InsertImage',
+	emits: ['change', 'insert'],
+	props: {
+		//主题色
+		color: {
+			type: String,
+			default: ''
+		},
+		//支持的图片类型数组
+		accept: {
+			type: Array,
+			default: null
+		},
+		//是否支持多选
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		//单个文件最大值
+		maxSize: {
+			type: Number,
+			default: null
+		},
+		//单个文件最小值
+		minSize: {
+			type: Number,
+			default: null
+		},
+		//是否自定义上传图片
+		customUpload: {
+			type: Function,
+			default: null
+		},
+		//处理上传图片异常
+		handleError: {
+			type: Function,
+			default: null
+		}
+	},
+	inject: ['$editTrans'],
+	data() {
+		return {
+			current: 'upload', //当前展示的面板，取值remote和upload
+			remoteUrl: '' //远程图片链接
+		}
+	},
+	computed: {
+		activeStyle() {
+			return name => {
+				if (this.current == name) {
+					return {
+						color: this.color
+					}
+				}
+				return {}
+			}
+		}
+	},
+	components: {
+		Icon
+	},
+	watch: {
+		//监听current变更触发change事件
+		current() {
+			this.$emit('change')
+		}
+	},
+	methods: {
+		//选择文件
+		async selectFile(e) {
+			const inputEle = e.currentTarget
+			const files = inputEle.files
+			if (!files.length) {
+				return
+			}
+			let filterFiles = []
+			for (let i = 0; i < files.length; i++) {
+				const file = files[i]
+				const suffix = this.getSuffix(file)
+				const isMatch = this.accept.some(item => {
+					return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
+				})
+				//后缀不符合
+				if (!isMatch) {
+					//如果自定义了异常处理
+					if (typeof this.handleError == 'function') {
+						this.handleError.apply(this, ['suffixError', file])
+					}
+					continue
+				}
+				//超过最大值
+				if (this.maxSize && file.size / 1024 > this.maxSize) {
+					//如果自定义了异常处理
+					if (typeof this.handleError == 'function') {
+						this.handleError.apply(this, ['maxSizeError', file])
+					}
+					continue
+				}
+				//没达到最小值
+				if (this.minSize && file.size / 1024 < this.minSize) {
+					//如果自定义了异常处理
+					if (typeof this.handleError == 'function') {
+						this.handleError.apply(this, ['minSizeError', file])
+					}
+					continue
+				}
+				filterFiles.push(file)
+			}
+			//有文件可上传
+			if (filterFiles.length) {
+				//自定义上传方法
+				if (typeof this.customUpload == 'function') {
+					this.customUpload.apply(this, [filterFiles])
+				}
+				//默认上传方法
+				else {
+					let images = []
+					for (let i = 0; i < filterFiles.length; i++) {
+						const url = await Dap.file.dataFileToBase64(filterFiles[i])
+						images.push(url)
+					}
+					images.forEach(url => {
+						this.$emit('insert', url)
+					})
+				}
+			}
+			//清空文件选择框
+			inputEle.value = ''
+		},
+		//获取文件后缀
+		getSuffix(file) {
+			const index = file.name.lastIndexOf('.')
+			if (index <= 0) {
+				return ''
+			}
+			return file.name.substring(index + 1)
+		},
+		//输入框获取焦点
+		handleInputFocus(e) {
+			if (this.color) {
+				e.currentTarget.style.borderColor = this.color
+			}
+		},
+		//输入框失去焦点
+		handleInputBlur(e) {
+			e.currentTarget.style.borderColor = ''
+		},
+		//插入网络图片
+		insertRemoteImage() {
+			this.$emit('insert', this.remoteUrl)
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.editify-image {
+	display: block;
+	width: 280px;
+	padding: 10px 14px;
+
+	.editify-image-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		width: 100%;
+		margin-bottom: 20px;
+		position: relative;
+		padding-bottom: 6px;
+
+		.editify-image-header-slider {
+			position: absolute;
+			width: 50px;
+			height: 2px;
+			border-radius: 2px;
+			left: 0;
+			bottom: 0;
+			transition: left 200ms;
+
+			&.upload {
+				left: 5px;
+			}
+
+			&.remote {
+				left: 85px;
+			}
+		}
+
+		.editify-image-header-item {
+			display: block;
+			text-align: center;
+			font-size: @font-size;
+			color: @font-color;
+			opacity: 0.8;
+			transition: all 200ms;
+			width: 60px;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			&:hover {
+				opacity: 1;
+				cursor: pointer;
+			}
+
+			&:first-child {
+				margin-right: 20px;
+			}
+
+			&.active {
+				opacity: 1;
+				color: @font-color-dark;
+			}
+		}
+	}
+
+	.editify-image-remote {
+		display: block;
+		width: 100%;
+
+		input {
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			display: block;
+			width: 100%;
+			margin: 0 0 10px 0;
+			padding: 4px 2px;
+			border: none;
+			font-size: @font-size;
+			color: @font-color;
+			border-bottom: 1px solid @border-color;
+			line-height: 1.5;
+			transition: border-color 500ms;
+			background-color: transparent;
+			outline: none;
+			box-sizing: border-box;
+
+			&::-webkit-input-placeholder,
+			&::placeholder {
+				color: @font-color-disabled;
+				font-family: inherit;
+				font-size: inherit;
+				vertical-align: middle;
+			}
+		}
+
+		.editify-image-remote-footer {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			width: 100%;
+			font-size: @font-size;
+			opacity: 0.8;
+			transition: all 200ms;
+
+			&:hover {
+				cursor: pointer;
+				opacity: 1;
+			}
+		}
+	}
+
+	.editify-image-upload {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		padding: 15px 0;
+		font-size: 36px;
+		opacity: 0.8;
+		transition: all 200ms;
+		position: relative;
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		input {
+			opacity: 0;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+			cursor: pointer;
+		}
+	}
+}
+</style>