完成编译工具;icon组件
宇天
parent
6b59093321
commit
5ea37cb89f
127
build.dev.js
127
build.dev.js
|
|
@ -1,50 +1,137 @@
|
||||||
#! /usr/bin/env node
|
#! /usr/bin/env node
|
||||||
|
|
||||||
|
require('es.shim')
|
||||||
const log = console.log
|
const log = console.log
|
||||||
const fs = require('iofs')
|
const fs = require('iofs')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const babel = require('babel-core')
|
const babel = require('babel-core')
|
||||||
const scss = require('node-sass')
|
const scss = require('node-sass')
|
||||||
const chokidar = require('chokidar')
|
const chokidar = require('chokidar')
|
||||||
const postcss = require('postcss')
|
|
||||||
const autoprefixer = require('autoprefixer')
|
|
||||||
const chalk = require('chalk')
|
const chalk = require('chalk')
|
||||||
|
|
||||||
const sourceDir = path.resolve(__dirname, 'src')
|
const sourceDir = path.resolve(__dirname, 'src')
|
||||||
const buildDir = path.resolve(__dirname, 'dist')
|
const buildDir = path.resolve(__dirname, 'dist')
|
||||||
const prefixer = postcss().use(
|
|
||||||
autoprefixer({
|
|
||||||
browsers: ['ff > 61', 'Chrome > 63']
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
const compileJs = (entry, output) => {
|
const VERSION = require('./package.json').version
|
||||||
|
const BUILD_DATE = new Date().format()
|
||||||
|
|
||||||
|
const BASE_SCSS = `
|
||||||
|
$ct: #3fc2a7 #19b491 #16967a;
|
||||||
|
$cg: #58d68d #2ecc71 #27ae60;
|
||||||
|
$cpp: #ac61ce #9b59b6 #8e44ad;
|
||||||
|
$cb: #52a3de #2d8dd6 #2776b1;
|
||||||
|
$cr: #ff5061 #eb3b48 #ce3742;
|
||||||
|
$co: #ffb618 #f39c12 #e67e22;
|
||||||
|
$cp: #f3f5fb #e8ebf4 #dae1e9;
|
||||||
|
$cgr: #aabac3 #90a3ae #7e909a;
|
||||||
|
$cd: #62778d #526273 #425064;
|
||||||
|
|
||||||
|
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
||||||
|
transition:$c $t $m;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;padding: 0;
|
||||||
|
}
|
||||||
|
::before,
|
||||||
|
::after{box-sizing:border-box;}
|
||||||
|
`
|
||||||
|
|
||||||
|
function compileJs(entry, output) {
|
||||||
log('编译JS: %s', chalk.green(entry))
|
log('编译JS: %s', chalk.green(entry))
|
||||||
let buf = fs.cat(entry).toString()
|
let buf = fs.cat(entry).toString()
|
||||||
let code = buf
|
let code = buf
|
||||||
.replace(/\.scss/g, '.css')
|
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
|
||||||
.replace(/import '([a-z0-9\/\.\-_]*)(?<!\.css)'/g, 'import "$1.js"')
|
|
||||||
.replace(
|
.replace(
|
||||||
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||||
'import $1 from "$2.js"'
|
'import $1 from "$2.js"'
|
||||||
)
|
)
|
||||||
.replace(/import '([a-z0-9\/\.\-_]*\.css)'/g, 'importCss("/$1")')
|
|
||||||
|
|
||||||
fs.echo(code, output)
|
fs.echo(code, output)
|
||||||
}
|
}
|
||||||
|
|
||||||
const compileCss = (entry, output) => {
|
// 编译样式
|
||||||
log('编译scss: %s', chalk.green(entry))
|
function compileScss(code = '') {
|
||||||
try {
|
try {
|
||||||
const { css } = scss.renderSync({ file: entry })
|
return scss.renderSync({ data: BASE_SCSS + code }).css
|
||||||
prefixer.process(css, { from: '', to: '' }).then(result => {
|
|
||||||
fs.echo(result.css, output)
|
|
||||||
})
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log(err)
|
log(err)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function mkWCFile({ style, html, js }) {
|
||||||
|
style = compileScss(style)
|
||||||
|
|
||||||
|
let name, props
|
||||||
|
|
||||||
|
js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
|
||||||
|
props = m
|
||||||
|
var attr = new Function(
|
||||||
|
`var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
|
||||||
|
)()
|
||||||
|
return `static get observedAttributes() {
|
||||||
|
return ${JSON.stringify(attr)}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
})
|
||||||
|
|
||||||
|
js = js
|
||||||
|
.replace(/class ([\w]+)/, function(s, m) {
|
||||||
|
name = m
|
||||||
|
return `${s} extends HTMLElement `
|
||||||
|
})
|
||||||
|
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
|
||||||
|
.replace(
|
||||||
|
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||||
|
'import $1 from "$2.js"'
|
||||||
|
)
|
||||||
|
.replace(
|
||||||
|
'/* render */',
|
||||||
|
`
|
||||||
|
super()
|
||||||
|
this.root = this.attachShadow({ mode: 'open' })
|
||||||
|
this.props = ${props}
|
||||||
|
|
||||||
|
this.root.innerHTML = \`<style>${style}</style>${html}\`
|
||||||
|
`
|
||||||
|
)
|
||||||
|
.replace('mounted', 'connectedCallback')
|
||||||
|
.replace('unmount', 'disconnectedCallback')
|
||||||
|
.replace('watch', 'attributeChangedCallback')
|
||||||
|
.replace('adopted', 'adoptedCallback')
|
||||||
|
|
||||||
|
return `/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent@doui.cc)
|
||||||
|
* @date ${BUILD_DATE}
|
||||||
|
* @version v${VERSION}
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
${js}
|
||||||
|
|
||||||
|
customElements.define('wc-${name.toLowerCase()}', ${name})
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
const compileWC = (entry, output) => {
|
||||||
|
log('编译wc: %s', chalk.green(entry))
|
||||||
|
let code = fs.cat(entry).toString()
|
||||||
|
let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
|
||||||
|
let html = code.match(/<template>([\w\W]*?)<\/template>/)
|
||||||
|
let js = code.match(/<script>([\w\W]*?)<\/script>/)
|
||||||
|
|
||||||
|
style = style ? style[1] : ''
|
||||||
|
html = html ? html[1] : ''
|
||||||
|
js = js ? js[1] : ''
|
||||||
|
|
||||||
|
let result = mkWCFile({ style, html, js })
|
||||||
|
fs.echo(result, output)
|
||||||
|
}
|
||||||
|
|
||||||
/*=======================================================*/
|
/*=======================================================*/
|
||||||
/*===== ===*/
|
/*===== ===*/
|
||||||
/*=======================================================*/
|
/*=======================================================*/
|
||||||
|
|
@ -65,9 +152,9 @@ chokidar
|
||||||
case '.js':
|
case '.js':
|
||||||
compileJs(entry, output)
|
compileJs(entry, output)
|
||||||
break
|
break
|
||||||
case '.scss':
|
case '.wc':
|
||||||
output = output.replace(/\.scss$/, '.css')
|
output = output.replace(/\.wc$/, '.js')
|
||||||
compileCss(entry, output)
|
compileWC(entry, output)
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
fs.cp(entry, output)
|
fs.cp(entry, output)
|
||||||
|
|
|
||||||
141
build.prod.js
141
build.prod.js
|
|
@ -1,38 +1,52 @@
|
||||||
#! /usr/bin/env node
|
#! /usr/bin/env node
|
||||||
|
|
||||||
|
require('es.shim')
|
||||||
const log = console.log
|
const log = console.log
|
||||||
const fs = require('iofs')
|
const fs = require('iofs')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const scss = require('node-sass')
|
const scss = require('node-sass')
|
||||||
const postcss = require('postcss')
|
|
||||||
const autoprefixer = require('autoprefixer')
|
|
||||||
const chalk = require('chalk')
|
const chalk = require('chalk')
|
||||||
const uglify = require('uglify-es')
|
const uglify = require('uglify-es')
|
||||||
|
|
||||||
const sourceDir = path.resolve(__dirname, 'src')
|
const sourceDir = path.resolve(__dirname, 'src')
|
||||||
const buildDir = path.resolve(__dirname, 'dist')
|
const buildDir = path.resolve(__dirname, 'dist')
|
||||||
const prefixer = postcss().use(
|
|
||||||
autoprefixer({
|
|
||||||
browsers: ['ff > 61', 'Chrome > 63']
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
const cssOpt = {
|
const VERSION = require('./package.json').version
|
||||||
outputStyle: 'compressed'
|
const BUILD_DATE = new Date().format()
|
||||||
|
|
||||||
|
const BASE_SCSS = `
|
||||||
|
$ct: #3fc2a7 #19b491 #16967a;
|
||||||
|
$cg: #58d68d #2ecc71 #27ae60;
|
||||||
|
$cpp: #ac61ce #9b59b6 #8e44ad;
|
||||||
|
$cb: #52a3de #2d8dd6 #2776b1;
|
||||||
|
$cr: #ff5061 #eb3b48 #ce3742;
|
||||||
|
$co: #ffb618 #f39c12 #e67e22;
|
||||||
|
$cp: #f3f5fb #e8ebf4 #dae1e9;
|
||||||
|
$cgr: #aabac3 #90a3ae #7e909a;
|
||||||
|
$cd: #62778d #526273 #425064;
|
||||||
|
|
||||||
|
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
||||||
|
transition:$c $t $m;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;padding: 0;
|
||||||
|
}
|
||||||
|
::before,
|
||||||
|
::after{box-sizing:border-box;}
|
||||||
|
`
|
||||||
|
|
||||||
const compileJs = (entry, output) => {
|
const compileJs = (entry, output) => {
|
||||||
let t1 = Date.now()
|
let t1 = Date.now()
|
||||||
let buf = fs.cat(entry).toString()
|
let buf = fs.cat(entry).toString()
|
||||||
let { code } = uglify.minify(buf)
|
let { code } = uglify.minify(buf)
|
||||||
code = code
|
code = code
|
||||||
.replace(/\.scss/g, '.css')
|
.replace(/import"([a-z0-9\/\.\-_]*)"/g, 'import "$1.js"')
|
||||||
.replace(/import"([a-z0-9\/\.\-_]*)(?<!\.css)"/g, 'import "$1.js"')
|
|
||||||
.replace(
|
.replace(
|
||||||
/import ([\w]*) from"([a-z0-9\/\.\-_]*)"/g,
|
/import ([\w]*) from"([a-z0-9\/\.\-_]*)"/g,
|
||||||
'import $1 from "$2.js"'
|
'import $1 from "$2.js"'
|
||||||
)
|
)
|
||||||
.replace(/import"([a-z0-9\/\.\-_]*\.css)"/g, 'importCss("/$1")')
|
|
||||||
log(
|
log(
|
||||||
'编译JS: %s, 耗时 %s ms',
|
'编译JS: %s, 耗时 %s ms',
|
||||||
chalk.green(entry),
|
chalk.green(entry),
|
||||||
|
|
@ -41,18 +55,93 @@ const compileJs = (entry, output) => {
|
||||||
fs.echo(code, output)
|
fs.echo(code, output)
|
||||||
}
|
}
|
||||||
|
|
||||||
const compileCss = (entry, output) => {
|
// 编译样式
|
||||||
let t1 = Date.now()
|
function compileScss(code = '') {
|
||||||
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
try {
|
||||||
|
return scss.renderSync({
|
||||||
|
data: BASE_SCSS + code,
|
||||||
|
outputStyle: 'compressed'
|
||||||
|
}).css
|
||||||
|
} catch (err) {
|
||||||
|
log(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
prefixer.process(css, { from: '', to: '' }).then(result => {
|
function mkWCFile({ style, html, js }) {
|
||||||
log(
|
style = compileScss(style)
|
||||||
'编译scss: %s, 耗时 %s ms',
|
|
||||||
chalk.green(entry),
|
html = html.replace(/[\n\r]+/g, ' ')
|
||||||
chalk.yellow(Date.now() - t1)
|
html = html.replace(/\s+/g, ' ')
|
||||||
)
|
|
||||||
fs.echo(result.css, output)
|
let name, props
|
||||||
|
|
||||||
|
js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
|
||||||
|
props = m
|
||||||
|
var attr = new Function(
|
||||||
|
`var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
|
||||||
|
)()
|
||||||
|
return `static get observedAttributes() {
|
||||||
|
return ${JSON.stringify(attr)}
|
||||||
|
}
|
||||||
|
`
|
||||||
})
|
})
|
||||||
|
|
||||||
|
js = js
|
||||||
|
.replace(/class ([\w]+)/, function(s, m) {
|
||||||
|
name = m
|
||||||
|
return `${s} extends HTMLElement `
|
||||||
|
})
|
||||||
|
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
|
||||||
|
.replace(
|
||||||
|
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||||
|
'import $1 from "$2.js"'
|
||||||
|
)
|
||||||
|
.replace(
|
||||||
|
'/* render */',
|
||||||
|
`
|
||||||
|
super()
|
||||||
|
this.root = this.attachShadow({ mode: 'open' })
|
||||||
|
this.props = ${props}
|
||||||
|
|
||||||
|
this.root.innerHTML = \`<style>${style}</style>${html}\`
|
||||||
|
`
|
||||||
|
)
|
||||||
|
.replace('mounted', 'connectedCallback')
|
||||||
|
.replace('unmount', 'disconnectedCallback')
|
||||||
|
.replace('watch', 'attributeChangedCallback')
|
||||||
|
.replace('adopted', 'adoptedCallback')
|
||||||
|
|
||||||
|
let res = uglify.minify(js)
|
||||||
|
|
||||||
|
return `/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent@doui.cc)
|
||||||
|
* @date ${BUILD_DATE}
|
||||||
|
* @version v${VERSION}
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
${res.code}
|
||||||
|
|
||||||
|
customElements.define('wc-${name.toLowerCase()}', ${name})
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
const compileWC = (entry, output) => {
|
||||||
|
log('编译wc: %s', chalk.green(entry))
|
||||||
|
let code = fs.cat(entry).toString()
|
||||||
|
let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
|
||||||
|
let html = code.match(/<template>([\w\W]*?)<\/template>/)
|
||||||
|
let js = code.match(/<script>([\w\W]*?)<\/script>/)
|
||||||
|
|
||||||
|
style = style ? style[1] : ''
|
||||||
|
html = html ? html[1] : ''
|
||||||
|
js = js ? js[1] : ''
|
||||||
|
|
||||||
|
let result = mkWCFile({ style, html, js })
|
||||||
|
fs.echo(result, output)
|
||||||
}
|
}
|
||||||
|
|
||||||
/*=======================================================*/
|
/*=======================================================*/
|
||||||
|
|
@ -93,13 +182,13 @@ files.forEach(file => {
|
||||||
let output = file.path.replace('src/', 'dist/')
|
let output = file.path.replace('src/', 'dist/')
|
||||||
|
|
||||||
switch (file.ext) {
|
switch (file.ext) {
|
||||||
|
case '.wc':
|
||||||
|
output = output.replace(/\.wc$/, '.js')
|
||||||
|
compileWC(entry, output)
|
||||||
|
break
|
||||||
case '.js':
|
case '.js':
|
||||||
compileJs(entry, output)
|
compileJs(entry, output)
|
||||||
break
|
break
|
||||||
case '.scss':
|
|
||||||
output = output.replace(/\.scss$/, '.css')
|
|
||||||
compileCss(entry, output)
|
|
||||||
break
|
|
||||||
default:
|
default:
|
||||||
fs.cp(entry, output)
|
fs.cp(entry, output)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
15
package.json
15
package.json
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "doui-anot",
|
"name": "doui-anot",
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"description": "基于Anot框架的doUI组件库。支持IE10+,及现代浏览器。",
|
"description": "基于Anot框架的doUI组件库。仅支持type=module的现代浏览器。",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "node ./build.dev.js",
|
"start": "node ./build.dev.js",
|
||||||
|
|
@ -17,18 +17,11 @@
|
||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"anot": "^2.0.0",
|
"anot": "^2.0.0",
|
||||||
"autoprefixer": "^7.2.6",
|
"es.shim": "^1.1.2",
|
||||||
"babel-core": "^6.26.3",
|
"chalk": "^2.4.2",
|
||||||
"babel-plugin-transform-decorators-legacy": "^1.3.5",
|
|
||||||
"babel-plugin-transform-es2015-classes": "^6.24.1",
|
|
||||||
"babel-plugin-transform-es2015-for-of": "^6.23.0",
|
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
|
||||||
"babel-preset-es2015": "^6.24.1",
|
|
||||||
"chalk": "^2.4.1",
|
|
||||||
"chokidar": "^1.7.0",
|
"chokidar": "^1.7.0",
|
||||||
"iofs": "^1.1.0",
|
"iofs": "^1.1.0",
|
||||||
"node-sass": "^4.11.0",
|
"node-sass": "^4.12.0",
|
||||||
"postcss": "^6.0.22",
|
|
||||||
"uglify-es": "^3.3.9"
|
"uglify-es": "^3.3.9"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent@doui.cc)
|
||||||
|
* @date 2014-10-10 00:45:09
|
||||||
|
*
|
||||||
|
* doui的CSS规范
|
||||||
|
*
|
||||||
|
* 不能出现大写,以连字符风格命名
|
||||||
|
* 表示状态的应该用do-st-*命名
|
||||||
|
* 表示功能的应该用do-fn-*命名
|
||||||
|
* 表示页面模块的应该用do-mod-modname 命名
|
||||||
|
* 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
|
||||||
|
* 如 .do-layer .body { ... }
|
||||||
|
*
|
||||||
|
* 样式规则的出现顺序
|
||||||
|
* 1 display float position overflow z-index 表示定位/布局的属性
|
||||||
|
* 2 width height margin padding border 表示盒子模型的属性
|
||||||
|
* 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性
|
||||||
|
* 4 color background opacity cursor ...表示装饰相关的属性
|
||||||
|
* 5 content list-style quotes ... 内容生成相关的属性
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
|
||||||
|
::before,::after {box-sizing:border-box;}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;}
|
||||||
|
img {border:0;display:inline-block;}
|
||||||
|
ol, ul {list-style: none;}
|
||||||
|
blockquote, q {quotes: none;}
|
||||||
|
blockquote::before, blockquote::after,
|
||||||
|
q::before, q::after {content: '';content: none;}
|
||||||
|
table {border-collapse: collapse;border-spacing: 0;}
|
||||||
|
a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
|
||||||
|
::-moz-focus-inner {
|
||||||
|
border:none;outline:none;
|
||||||
|
}
|
||||||
|
body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
|
||||||
|
code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
|
||||||
|
[anot],[\:repeat],[\:if],[is-widget],slot {visibility:hidden;}
|
||||||
|
|
||||||
|
.do-fn-cl { *zoom: 1; }
|
||||||
|
.do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;}
|
||||||
|
.do-fn-clear {clear:both;display:inline;}
|
||||||
|
|
||||||
|
.do-fn-show{display:block;}
|
||||||
|
.do-fn-hide{display:none;}
|
||||||
|
.do-fn-fl{float:left;}
|
||||||
|
.do-fn-fr{float:right;}
|
||||||
|
.do-fn-noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
|
||||||
|
.do-fn-noselect img, .do-fn-noselect a {-webkit-user-drag:none;}
|
||||||
|
.do-fn-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
|
||||||
|
.do-st-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
||||||
|
.do-st-hand {cursor:pointer;}
|
||||||
|
|
||||||
|
[class^="do-icon-"], [class*=" do-icon-"] {display:inline-block;font-family:"uifont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,170 @@
|
||||||
|
<template>
|
||||||
|
<label>
|
||||||
|
<wc-icon class="icon"></wc-icon>
|
||||||
|
<slot></slot>
|
||||||
|
</label>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
user-select: none;
|
||||||
|
color: nth($cd, 2);
|
||||||
|
background: #fff;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 60px;
|
||||||
|
min-height: 33px;
|
||||||
|
padding: 0 5px;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid nth($cp, 3);
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.mini {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&([size="mini"]) label {
|
||||||
|
min-width: 50px;
|
||||||
|
height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([loading]) label,
|
||||||
|
:host([disabled]) label {
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: nth($cp, 3);
|
||||||
|
wc-icon {
|
||||||
|
color: nth($cp, 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '../icon/index'
|
||||||
|
|
||||||
|
const log = console.log
|
||||||
|
|
||||||
|
export default class Button {
|
||||||
|
props = {
|
||||||
|
icon: '',
|
||||||
|
size: 'small',
|
||||||
|
color: 'red',
|
||||||
|
loading: false,
|
||||||
|
disabled: false
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
/* render */
|
||||||
|
|
||||||
|
this.__BTN__ = this.root.children[1]
|
||||||
|
this.__ICO__ = this.__BTN__.children[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
get loading() {
|
||||||
|
return this.props.loading
|
||||||
|
}
|
||||||
|
|
||||||
|
set loading(val) {
|
||||||
|
var type = typeof val
|
||||||
|
|
||||||
|
if (val === this.props.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||||
|
this.props.loading = true
|
||||||
|
this.__ICO__.setAttribute('is', 'loading')
|
||||||
|
this.setAttribute('loading', '')
|
||||||
|
} else {
|
||||||
|
this.props.loading = false
|
||||||
|
this.__ICO__.setAttribute('is', this.props.icon)
|
||||||
|
this.removeAttribute('loading')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get disabled() {
|
||||||
|
return this.props.disabled
|
||||||
|
}
|
||||||
|
|
||||||
|
set disabled(val) {
|
||||||
|
var type = typeof val
|
||||||
|
|
||||||
|
if (val === this.props.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||||
|
this.props.disabled = true
|
||||||
|
this.setAttribute('disabled', '')
|
||||||
|
} else {
|
||||||
|
this.props.disabled = false
|
||||||
|
this.removeAttribute('disabled')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.__BTN__.addEventListener(
|
||||||
|
'click',
|
||||||
|
ev => {
|
||||||
|
if (this.props.loading || this.props.disabled) {
|
||||||
|
// 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
|
||||||
|
ev.cancelBubble = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.dispatchEvent(new CustomEvent('active'))
|
||||||
|
},
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
unmount() {
|
||||||
|
log(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(name, old, val) {
|
||||||
|
if (old === val) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
switch (name) {
|
||||||
|
case 'icon':
|
||||||
|
this.props.icon = val
|
||||||
|
if (val) {
|
||||||
|
if (!this.props.loading) {
|
||||||
|
this.__ICO__.setAttribute('is', val)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.removeAttribute('icon')
|
||||||
|
this.__ICO__.removeAttribute('is')
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'size':
|
||||||
|
this.props.size = val || 'small'
|
||||||
|
this.__BTN__.classList.add(this.props.size)
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'loading':
|
||||||
|
case 'disabled':
|
||||||
|
if (val === '') {
|
||||||
|
this[name] = true
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024"></svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
color: nth($cd, 2);
|
||||||
|
}
|
||||||
|
:host(:not([is])) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.load {
|
||||||
|
animation: load 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle {
|
||||||
|
stroke: currentColor;
|
||||||
|
animation: circle 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circle {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 0, 3812px;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
stroke-dasharray: 1906px, 3812px;
|
||||||
|
stroke-dashoffset: -287px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 1906px, 3812px;
|
||||||
|
stroke-dashoffset: -2393px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes load {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SVG_DICT from './svg'
|
||||||
|
|
||||||
|
const log = console.log
|
||||||
|
|
||||||
|
export default class Icon {
|
||||||
|
props = {
|
||||||
|
is: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
/* render */
|
||||||
|
|
||||||
|
this.__ICO__ = this.root.lastElementChild
|
||||||
|
this.drawPath()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制图标
|
||||||
|
drawPath() {
|
||||||
|
var { is } = this.props
|
||||||
|
var path = SVG_DICT[is]
|
||||||
|
if (!this.__ICO__) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (is && path) {
|
||||||
|
this.__ICO__.innerHTML = is === 'loading' ? path : `<path d="${path}" />`
|
||||||
|
|
||||||
|
this.__ICO__.classList.toggle('load', is === 'loading')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
set is(val) {
|
||||||
|
this.props.is = val
|
||||||
|
this.drawPath()
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(name, old, val) {
|
||||||
|
switch (name) {
|
||||||
|
case 'is':
|
||||||
|
this.is = val
|
||||||
|
if (!val) {
|
||||||
|
this.removeAttribute('is')
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
/**
|
||||||
|
* {icon svg}
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/07/17 15:12:14
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
at:
|
||||||
|
'M512 64C264.5 64 64 264.5 64 512s200.5 448 448 448 448-200.5 448-448S759.5 64 512 64z m275.3 434.9c-1.9 46.1-16.4 85.9-43.1 119.8-26.7 33.6-66.8 50.4-119.8 50.4-17.7 0-33-4.7-45.7-14.2-12.9-9.5-22-23-27.1-40.5-8.8 17.9-20.2 31.2-33.8 40.1-13.6 8.8-29.5 13.4-47.8 13.4-32.5 0-57.3-12.5-74.5-37.3s-23.5-57.7-19-98.9c5.6-52.6 21.5-94.8 47.8-126.4s58.2-47.4 95.6-47.4c26.3 0 47.6 2.8 63.5 8.2 15.9 5.4 33.6 12.3 52.8 23.7l-1.1-0.2h1.7l-16.6 179.6c-1.1 18.3 0.2 31.4 3.7 38.3 3.7 6.9 8.4 10.6 14.4 10.6 24.3 0 43.9-11 58.6-33.6 14.6-22.6 22.8-50.8 24.6-85.3 3.4-71.1-11-126.4-43.5-166.1-32.5-39.6-82.5-59.7-150.1-59.7-65.7 0-118 21.3-156.8 64.2s-59.7 101-63.1 174.9c-3.7 71.9 12.1 128.8 47.2 170.4 35.1 41.8 85.5 62.7 151.4 62.7 18.3 0 37.3-1.9 57.1-5.8 19.6-3.9 36.8-8.8 51-14.6l12.5 52.1c-14.6 8.8-33.2 15.7-55.8 20.7-22.6 5-44.6 7.3-66.1 7.3-87.9 0-155.7-26.1-203.1-78.4-47.4-52.1-69.4-123.6-65.7-214.5 3.9-90 32.1-161.3 84.2-214.1 52.3-52.8 121.7-79 208.3-79 85.1 0 150.3 25 195.4 74.7 45.6 49.8 66.3 118.1 62.9 204.9z',
|
||||||
|
attach:
|
||||||
|
'M872.7 458.8L499.9 831.6c-74.6 74.6-196.6 74.6-271.1 0-74.6-74.6-74.6-196.6 0-271.1l389.7-389.7c47.4-47.4 122-47.4 169.5 0 47.4 47.4 47.4 122 0 169.5L398.2 730c-18.6 18.6-49.1 18.6-67.8 0-18.6-18.6-18.6-49.1 0-67.8l322-322-50.8-50.8-322 322c-47.4 47.4-47.4 122 0 169.5 47.4 47.4 122 47.4 169.5 0l389.7-389.7c74.6-74.6 74.6-196.6 0-271.1s-196.6-74.6-271.1 0L178 509.7C74.6 613 74.6 779.1 178 882.5s269.4 103.4 372.8 0l372.8-372.8-50.9-50.9z',
|
||||||
|
camera:
|
||||||
|
'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m271.5 719.5C711 856.1 614.6 896 512 896s-199-39.9-271.5-112.5C167.9 711 128 614.6 128 512s39.9-199 112.5-271.5C313 167.9 409.4 128 512 128s199 39.9 271.5 112.5C856.1 313 896 409.4 896 512s-39.9 199-112.5 271.5zM400.1 212.1c-81.3 30.3-146.9 92.8-181.4 171.9H512L400.1 212.1zM825.6 576c4.3-21.1 6.4-42.5 6.4-64 0-73.2-24.6-140.7-66-194.7L622 576h203.6zM719.9 268.8C664 220.9 591.4 192 512 192c-15.9 0-31.6 1.2-46.9 3.4L621.7 448l98.2-179.2zM198.4 448c-4.3 21.1-6.4 42.5-6.4 64 0 73.3 24.6 140.8 66.1 194.7L402 448H198.4z m425.5 363.9c81.3-30.3 146.9-92.8 181.4-171.9H512l111.9 171.9z m-319.8-56.7C360 803.1 432.6 832 512 832c15.9 0 31.6-1.2 46.9-3.4L402.3 576l-98.2 179.2z',
|
||||||
|
'eye-on':
|
||||||
|
'M512 210c-203.6 0-376.8 124.8-448 302 71.2 177.2 244.4 302 448 302s376.8-124.8 448-302c-71.2-177.2-244.4-302-448-302z m0 503.4c-112 0-203.6-90.6-203.6-201.4S400 310.6 512 310.6 715.6 401.2 715.6 512 624 713.4 512 713.4z m0-322.2c-67.2 0-122.2 54.4-122.2 120.8s55 120.8 122.2 120.8S634.2 578.4 634.2 512s-55-120.8-122.2-120.8z',
|
||||||
|
'eye-off':
|
||||||
|
'M512.1 289.6c112.4 0 203.8 90.6 203.8 202.2 0 26.2-5.2 51-14.6 74l119 118c61.6-51 110-116.8 139.8-192-70.6-177.4-244.5-303.1-448.3-303.1-57 0-111.6 10.2-162.2 28.2l88 87.4c23.1-9.3 48.1-14.7 74.5-14.7zM104.8 179.5l93 92.2 18.8 18.6C148.8 342.2 95.8 411.8 64 491.8c70.4 177.4 244.3 303.1 448.1 303.1 63.2 0 123.4-12.2 178.4-34l17.2 17 119.4 118 51.8-51.4-722.5-716.4-51.6 51.4z m225.1 223.3l63.2 62.6c-2 8.4-3.2 17.4-3.2 26.2 0 67 54.6 121.2 122.2 121.2 9 0 18-1.2 26.4-3.2l63.2 62.6c-27.2 13.4-57.4 21.4-89.6 21.4-112.4 0-203.8-90.6-203.8-202.2 0-31.6 8.2-61.4 21.6-88.6z m175.6-31.4l128.4 127.4 0.8-6.4c0-67-54.6-121.2-122.2-121.2l-7 0.2z',
|
||||||
|
key:
|
||||||
|
'M497.4 443.1C466.8 356.5 378.7 288 281.5 288 158.3 288 64 388.8 64 512s98.6 224 221.8 224c97.1 0 181.1-68.5 211.5-155.1h221.4v137.8h148.8V580.9H960V443.1H497.4zM287.1 586.3c-40.9 0-74.3-33.4-74.3-74.3s33.4-74.3 74.3-74.3 74.3 33.4 74.3 74.3-33.3 74.3-74.3 74.3z',
|
||||||
|
setting:
|
||||||
|
'M64 768h544v64H64v-64z m736 0h160v64H800v-64z m-32 127c0 35.9-28.7 65-64 65s-64-29.1-64-65V705c0-35.9 28.7-65 64-65s64 29.1 64 65v190zM64 480h160v64H64v-64z m352 0h544v64H416v-64z m-32 127c0 35.9-28.7 65-64 65s-64-29.1-64-65V417c0-35.9 28.7-65 64-65s64 29.1 64 65v190zM64 192h544v64H64v-64z m736 0h160v64H800v-64z m-32 127c0 35.9-28.7 65-64 65s-64-29.1-64-65V129c0-35.9 28.7-65 64-65s64 29.1 64 65v190z',
|
||||||
|
'finger-print':
|
||||||
|
'M156.2 411.2c-4.8 0-9.8-1.2-14.2-3.8-13.4-7.8-18-24.8-10.2-38.2C167.4 309.2 275.6 169 512 169c102.4 0 192.2 27.2 266.8 80.8 61.4 44 95.8 93.8 112.2 117.8 8.8 12.8 5.4 30-7.4 38.8-12.8 8.6-30.4 5.4-39.2-7.4-29.8-43.2-120.2-174.4-332.4-174.4-207.2 0-300.8 120.8-331.4 172.6-5.2 9.2-14.6 14-24.4 14zM631 960c12.6 0 24-8.4 27.4-21 3.8-14.8-5.2-30-20.4-33.8C501 870.8 443.8 729 439.4 717.8c-1.4-4.6-7.4-27.4-9.4-55.6-2-27-0.6-64.2 17.4-88 13.2-17.4 34.4-25.8 64.6-25.8 55 0 64.2 27.2 78.6 83.6 14 55 33.2 130.4 140 135.8 41 2 78-16.4 104-51.6 39-52.8 46.4-133.6 18.8-205.6-21.6-56.4-63.2-112.8-114-154.8-65.6-54-144.2-82.6-227.4-82.6-180 0-299.6 123.2-338.4 245.4C138 631.4 181.2 795 183 802c4 14.8 19.6 23.8 34.6 19.8 15-3.8 24-19.2 20-34-0.4-1.4-40.8-154.8-10-252.4 16.6-52.4 51.2-103.4 94.8-139.6C375 352.2 440.6 329 512 329c167.2 0 262 131.8 288.8 201.8 20.8 54 16 115.4-11.6 153-10.2 13.8-28.2 30-55.6 28.6-62.4-3.2-73.2-34.4-88.2-93.8-7.2-28.6-14.6-58.2-33-82.2-22.4-29.4-55-43.6-100.2-43.6-48.6 0-85.4 16.2-109.6 48-52.8 69.6-18.4 188.4-17 193.4l0.4 1.6c2.6 7.2 66.6 180.4 238 223.4 2.4 0.6 4.6 0.8 7 0.8z m-220-12.8c6.8 0 13.8-2.6 19-7.4 11.4-10.4 12-28.2 1.4-39.4-60.4-64-94.6-135.6-107.4-225.6-6.4-52.8 2.6-132.6 49-184.4 32.2-36 79-54.2 138.8-54.2 69.2 0 121.6 31.2 156 92.6 27.4 48.8 33 98.8 33 99.4 1.6 15.2 15.6 26.4 31 24.8s26.8-15.2 25.2-30.6c-0.2-2.4-6.6-60.6-38.8-119-44.4-80.4-115.6-123-206.2-123-76.6 0-137.6 24.6-181 73-58.8 65.6-70.8 161-62.6 228.4v0.6c14.6 101.8 53.4 183.2 122 256 5.6 5.8 13 8.8 20.6 8.8zM727 867c12.8 0 26.2-0.8 39.8-2.4 15.4-1.6 26.6-15.4 24.8-30.8-1.8-15.4-15.8-26.4-31.2-24.6-61.6 7-111.6-5-149-35.2-63.2-51.2-71.4-140.2-71.6-141.8-1.2-15.4-14.6-26.8-30.2-25.6s-27.2 14.6-26 30c0.4 4.6 9.6 113.4 91.6 180.2C616 850.2 667 867 727 867z m64.6-716c0 15.4-12.6 27.8-28.2 27.8-6.4 0-12.2-2-17-5.6l-0.4 0.4 0.2 0.2c-0.8-0.4-72.6-54-234.2-54s-233.4 53.4-234.2 54l0.2-0.2c-4.6 3.2-10.2 5.2-16.4 5.2-15.6 0-28.2-12.4-28.2-27.8 0-8.2 3.6-15.6 9.4-20.8 0 0 0.2 0 0.4-0.2 1-1 2.2-1.8 3.4-2.6C265 114.6 348.2 64 512 64c156 0 239 45.8 262.4 61.2 10.2 4.2 17.2 14.2 17.2 25.8z',
|
||||||
|
loading:
|
||||||
|
'<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />',
|
||||||
|
pie:
|
||||||
|
'M64 480C64 250.2 250.2 64 480 64c10.8 0 22 0.4 32 1.2V512H65.2c-0.8-10-1.2-21.2-1.2-32z m155.6 324.4C295.8 899.2 412.8 960 544 960c229.8 0 416-186.2 416-416 0-131.2-60.8-248.2-155.6-324.4-63.4-51-142.4-83.8-228.4-90.4V576H129.2c6.6 86 39.4 165 90.4 228.4z',
|
||||||
|
image:
|
||||||
|
'M915.1 280.3l-165-8-9.6-107.6c-2-22.6-22.2-38.4-45.8-36.6l-591.8 48.6c-23.6 2-40.6 21-38.8 43.4l42.4 471.6c2 22.6 22.4 38.4 45.8 36.6l30-2.4-4.8 91.6c-1.2 25.2 18.4 45.6 44.8 47l660.2 31.4c26.4 1.2 48.2-17.2 49.6-42.4l27.8-526.6c1.2-25-18.6-45.4-44.8-46.6z m-709.8 10.6l-14.2 269.6-35 49.4-32.2-356v-2c2-10 8.8-18 19.2-18.8l522-42.8c10.4-0.8 19.4 6 21 15.8 0 0.4 0.6 0.4 0.6 0.8 0 0.2 0.6 0.4 0.6 0.8l5.4 61.6-438-21c-26.4-0.8-48.2 17.6-49.4 42.6z m668 473.8l-169.6-199-74.8 68.6-138.4-161.6-245.4 261.4 20.8-398.2v-0.8c2-10.8 12.4-18.6 23.8-18l582.4 28c11.6 0.6 20.6 9.4 20.8 20.4 0 0.4 0.6 0.6 0.6 1l-20.2 398.2z',
|
||||||
|
'radio-on':
|
||||||
|
'M512 288c-123.2 0-224 100.8-224 224s100.8 224 224 224 224-100.8 224-224-100.8-224-224-224z m0-224C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m0 806.4c-197.1 0-358.4-161.3-358.4-358.4S314.9 153.6 512 153.6 870.4 314.9 870.4 512 709.1 870.4 512 870.4z',
|
||||||
|
'radio-off':
|
||||||
|
'M512 64C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m0 806.4c-197.1 0-358.4-161.3-358.4-358.4S314.9 153.6 512 153.6 870.4 314.9 870.4 512 709.1 870.4 512 870.4z',
|
||||||
|
'checkbox-on':
|
||||||
|
'M860.4 64H163.6C108.8 64 64 108.8 64 163.6v696.9c0 54.8 44.8 99.6 99.6 99.6h696.9c54.8 0 99.6-44.8 99.6-99.6V163.6C960 108.8 915.2 64 860.4 64z m-448 696.9L163.6 512l69.7-69.7 179.2 179.2 378.3-378.3 69.7 69.7-448.1 448z',
|
||||||
|
'checkbox-off':
|
||||||
|
'M860.2 163.6v696.8H163.6V163.6h696.6m0-99.6H163.6C108.8 64 64 108.8 64 163.6v696.8c0 54.8 44.8 99.6 99.6 99.6h696.8c54.8 0 99.6-44.8 99.6-99.6V163.6c-0.2-54.8-45-99.6-99.8-99.6z',
|
||||||
|
tag:
|
||||||
|
'M885.3 64H515.8L93.2 501.8C74.5 520.5 64.5 545 64 569.5c-0.7 26.4 9.1 52.7 29.2 72.8l288.6 288.5c18.7 18.7 48.5 29.2 67.2 29.2 18.7 0 53.2-9.1 73.3-29.2L960 512.1V138.7L885.3 64z m-71.6 239.7c-50.6 14.2-96.4-23.3-96.4-71.7 0-41.3 33.4-74.7 74.7-74.7 48.3 0 85.9 45.7 71.6 96.4-6.7 24.1-25.9 43.2-49.9 50z',
|
||||||
|
phone:
|
||||||
|
'M717.7 64H306.3C261 64 224 100.7 224 145.5v733.1c0 44.8 37 81.5 82.3 81.5h411.4c45.3 0 82.3-36.7 82.3-81.5V145.5c0-44.8-37-81.5-82.3-81.5zM728 832H296V163h432v669z m-168 64c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z',
|
||||||
|
mail:
|
||||||
|
'M960 280.9v472.3c0 37.9-31 68.9-68.9 68.9H132.9c-37.9 0-68.9-31-68.9-68.9V280.9c0-3.9 4.5-5.8 7.3-3l232 236.1c1.5 1.7 1.5 4.3 0 6L141.1 692.7c-11 11-11 28.6 0 39.6 5.4 5.4 12.7 8.2 19.8 8.2s14.4-2.8 19.8-8.2l161.5-172.1c1.7-1.7 4.5-1.7 6.2 0l37.9 38.6c33.4 33.8 78.6 53.8 126.2 53.6 47-0.2 90.7-18.7 123.6-52.1l39.4-40.1c1.7-1.7 4.5-1.7 6.2 0l161.5 172.1c5.4 5.4 12.7 8.2 19.8 8.2s14.4-2.8 19.8-8.2c11-11 11-28.6 0-39.6L720.9 520c-1.7-1.7-1.7-4.3 0-6l231.8-236.1c2.6-2.6 7.3-0.9 7.3 3zM512 596.2c31.9 0 61.8-12.5 84.2-35.3l337.9-344c-11.8-9.5-26.5-15.1-42.6-15.1H132.7c-16.2 0-31 5.6-42.6 15.1l337.9 344c22.2 22.6 52.1 35.3 84 35.3z',
|
||||||
|
'mail-unread':
|
||||||
|
'M856.6 184.6c57.1 0 103.4 46.3 103.4 103.4s-46.3 103.4-103.4 103.4c-57.1 0-103.4-46.3-103.4-103.4s46.3-103.4 103.4-103.4z m0 246.6c-11.6 0-22.8-1.5-33.6-4.1l-102.1 104c-1.7 1.7-1.7 4.3 0 6l162.2 172.7c11 11 11 28.6 0 39.6-5.4 5.4-12.7 8.2-19.8 8.2s-14.4-2.8-19.8-8.2L681.9 577.5c-1.7-1.7-4.5-1.7-6.2 0l-39.4 40.1c-33 33.4-76.7 51.9-123.6 52.1-47.6 0.2-92.8-19.8-126.2-53.6l-37.9-38.6c-1.7-1.7-4.5-1.7-6.2 0L180.7 749.6c-5.4 5.4-12.7 8.2-19.8 8.2s-14.4-2.8-19.8-8.2c-11-11-11-28.6 0-39.6l162.2-172.7c1.5-1.7 1.5-4.3 0-6l-232-236.1c-2.8-2.8-7.3-0.9-7.3 3v472.3c0 37.9 31 68.9 68.9 68.9h758.2c37.9 0 68.9-31 68.9-68.9V387.1c-26.1 27.1-62.7 44.1-103.4 44.1zM713.4 288c0-25 6.5-48.5 17.7-68.9H132.7c-16.2 0-31 5.6-42.6 15.1l337.9 344c22.4 22.8 52.3 35.3 84.2 35.3s61.8-12.5 84.2-35.3l173.4-176.4c-34.4-26.4-56.4-67.5-56.4-113.8z'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
style="overflow:hidden;position: absolute;width:0;height:0"
|
||||||
|
>
|
||||||
|
${iconList.map( _ => `
|
||||||
|
<symbol id="icon-${_.key}" viewBox="0 0 1024 1024">
|
||||||
|
<path d="${_.path}" />
|
||||||
|
</symbol>
|
||||||
|
` ).join('')}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<section class="tool-bar">
|
||||||
|
${this._parseTools()}
|
||||||
|
</section>
|
||||||
|
<div class="font-layer">
|
||||||
|
<span data-size="6">大号字体</span>
|
||||||
|
<span data-size="5">中号字体</span>
|
||||||
|
<span data-size="3">小号字体</span>
|
||||||
|
</div>
|
||||||
|
<div class="color-layer">
|
||||||
|
<span data-color="#f3f5fb"></span>
|
||||||
|
<span data-color="#dae1e9"></span>
|
||||||
|
<span data-color="#62778d"></span>
|
||||||
|
<span data-color="#58d68d"></span>
|
||||||
|
<span data-color="#3fc2a7"></span>
|
||||||
|
<span data-color="#52a3de"></span>
|
||||||
|
<span data-color="#ac61ce"></span>
|
||||||
|
<span data-color="#ffb618"></span>
|
||||||
|
<span data-color="#e67e22"></span>
|
||||||
|
<span data-color="#ff5061"></span>
|
||||||
|
<span data-color="#ff0000"></span>
|
||||||
|
<span data-color="#000000"></span>
|
||||||
|
</div>
|
||||||
|
<div class="link-layer">
|
||||||
|
<input placeholder="请输入链接地址" />
|
||||||
|
<span>插入</span>
|
||||||
|
</div>
|
||||||
|
<div contenteditable="true" class="editor" spellcheck="false"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default class DoButton extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
|
||||||
|
this.root = this.attachShadow({ mode: 'open' })
|
||||||
|
|
||||||
|
this.root.innerHTML = `/*html*/`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column wrap;
|
||||||
|
min-width: 200px;
|
||||||
|
min-height: 100px;
|
||||||
|
border: 1px solid #e7e8eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.tool-bar {
|
||||||
|
display: flex;
|
||||||
|
height: 34px;
|
||||||
|
padding: 5px;
|
||||||
|
line-height: 24px;
|
||||||
|
border-bottom: 1px solid #e7e8eb;
|
||||||
|
}
|
||||||
|
.tool-bar span {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 0 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.tool-bar span:hover {
|
||||||
|
background: #f7f8fb;
|
||||||
|
}
|
||||||
|
.tool-bar span input {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-bar .icon {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
fill: currentColor;
|
||||||
|
color: #62778d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 360px;
|
||||||
|
padding: 5px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.editor img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-layer,
|
||||||
|
.color-layer,
|
||||||
|
.link-layer {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99;
|
||||||
|
width: 80px;
|
||||||
|
padding: 5px 0;
|
||||||
|
line-height: 25px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
|
||||||
|
font-size: 13px;
|
||||||
|
user-select: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all ease-in-out 0.2s;
|
||||||
|
}
|
||||||
|
.font-layer.fadein {
|
||||||
|
visibility: visible;
|
||||||
|
top: 34px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.font-layer span {
|
||||||
|
display: block;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
.font-layer span:hover {
|
||||||
|
background: #f7f8fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-layer {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
left: 30px;
|
||||||
|
width: 96px;
|
||||||
|
}
|
||||||
|
.color-layer.fadein {
|
||||||
|
visibility: visible;
|
||||||
|
top: 34px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.color-layer span {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 2px;
|
||||||
|
background: #f30;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(1) {
|
||||||
|
background: #f3f5fb;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(2) {
|
||||||
|
background: #dae1e9;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(3) {
|
||||||
|
background: #62778d;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(4) {
|
||||||
|
background: #58d68d;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(5) {
|
||||||
|
background: #3fc2a7;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(6) {
|
||||||
|
background: #52a3de;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(7) {
|
||||||
|
background: #ac61ce;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(8) {
|
||||||
|
background: #ffb618;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(9) {
|
||||||
|
background: #e67e22;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(10) {
|
||||||
|
background: #ff5061;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(11) {
|
||||||
|
background: #ff0000;
|
||||||
|
}
|
||||||
|
.color-layer span:nth-child(12) {
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-layer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
left: 330px;
|
||||||
|
width: 180px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.link-layer input {
|
||||||
|
width: 120px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 8px;
|
||||||
|
padding: 0 5px;
|
||||||
|
border: 1px solid #e7e8eb;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.link-layer span {
|
||||||
|
height: 20px;
|
||||||
|
padding: 0 5px;
|
||||||
|
line-height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #dae1e9;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-layer.fadein {
|
||||||
|
visibility: visible;
|
||||||
|
top: 34px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue