forked from opentiny/tiny-vue
refactor: remove useless files (#92)
This commit is contained in:
GitHub
parent
534e80d99d
commit
90372cbb28
|
|
@ -1,92 +0,0 @@
|
||||||
const vue = require('rollup-plugin-vue')
|
|
||||||
const { babel } = require('@rollup/plugin-babel')
|
|
||||||
const commonjs = require('@rollup/plugin-commonjs')
|
|
||||||
const { nodeResolve } = require('@rollup/plugin-node-resolve')
|
|
||||||
const { pathJoin, logGreen, logRed } = require('./utils')
|
|
||||||
const rollup = require('rollup')
|
|
||||||
const svg = require('rollup-plugin-vue-inline-svg')
|
|
||||||
const fs = require('fs-extra')
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
const inputOptions = {
|
|
||||||
plugins: [
|
|
||||||
vue({
|
|
||||||
css: true
|
|
||||||
}),
|
|
||||||
svg({
|
|
||||||
svgoConfig: {
|
|
||||||
plugins: [{ removeDoctype: true }, { removeComments: true }, { removeViewBox: false }],
|
|
||||||
removeViewBox: false
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
nodeResolve(),
|
|
||||||
babel({
|
|
||||||
exclude: /node_modules/,
|
|
||||||
configFile: false, // 必须为 false 不然会取根文件的 babel.config.js 配置，产生一堆 runtime 代码
|
|
||||||
babelrc: false,
|
|
||||||
babelHelpers: 'bundled',
|
|
||||||
plugins: ['@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from'],
|
|
||||||
presets: ['@babel/preset-env'],
|
|
||||||
extensions: ['.js', '.vue']
|
|
||||||
}),
|
|
||||||
// 如果打包文件中包含 jsx 语法， commonjs 必须放置在 babel 配置下面，否则会报错 PLUGIN_ERROR
|
|
||||||
commonjs()
|
|
||||||
],
|
|
||||||
external: (deps) => /^@opentiny[\\/]vue-common/.test(deps)
|
|
||||||
}
|
|
||||||
|
|
||||||
const outputOptions = {
|
|
||||||
format: 'es',
|
|
||||||
exports: 'named'
|
|
||||||
}
|
|
||||||
|
|
||||||
const build = (components) => {
|
|
||||||
components.forEach((component) => {
|
|
||||||
const inputs = { ...inputOptions }
|
|
||||||
|
|
||||||
inputs.input = pathJoin('..', 'packages', 'icon', component.path)
|
|
||||||
|
|
||||||
if (component.path === 'index.js') {
|
|
||||||
inputs.external = (deps) => !deps.includes('index.js')
|
|
||||||
} else {
|
|
||||||
inputs.external = (deps) => /^@opentiny[\\/]vue-common/.test(deps)
|
|
||||||
}
|
|
||||||
|
|
||||||
rollup
|
|
||||||
.rollup(inputs)
|
|
||||||
.then((bundle) => {
|
|
||||||
const outs = { ...outputOptions }
|
|
||||||
outs.file = pathJoin('..', 'packages', 'icon', component.libPath)
|
|
||||||
bundle.write(outs)
|
|
||||||
logGreen(`${component.path} compile icon done`)
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
logRed(e)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function createComponentMap(dir) {
|
|
||||||
const components = []
|
|
||||||
fs.readdirSync(dir).forEach((file) => {
|
|
||||||
if (['dist', 'runtime'].includes(file)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.statSync(path.join(dir, file)).isDirectory()) {
|
|
||||||
components.push({
|
|
||||||
path: `${file}/index.js`,
|
|
||||||
libPath: `dist/lib/${file}.js`
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
file.endsWith('.js') &&
|
|
||||||
components.push({
|
|
||||||
path: `${file}`,
|
|
||||||
libPath: `dist/lib/${file}`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return components
|
|
||||||
}
|
|
||||||
|
|
||||||
build(createComponentMap(pathJoin('..', 'packages', 'icon')))
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
/**
|
|
||||||
* 批量更新组件版本号，一般用于大版本发布
|
|
||||||
* npm run build:version ${targetVersion} ${tag} ${single-components}|null[build all pkg]
|
|
||||||
* example:
|
|
||||||
* 发布 @opentiny/vue-alert@next 和 @opentiny/vue-button@next 命令:
|
|
||||||
* npm run build:version '0.1.0' 'next' 'alert button'
|
|
||||||
* 发布全量包@next:
|
|
||||||
* npm run build:version '0.1.0' 'next'
|
|
||||||
*/
|
|
||||||
const fs = require('fs-extra')
|
|
||||||
const path = require('path')
|
|
||||||
const ROOT_PATH = path.join(__dirname, '..')
|
|
||||||
const TYPE = process.env.TYPE
|
|
||||||
const isFullVersionUpdate = true
|
|
||||||
const TAG = process.argv[3] === 'false' ? '' : process.argv[3]
|
|
||||||
const packages = path.join(ROOT_PATH, 'packages')
|
|
||||||
const pkgJsonFileName = 'package.json'
|
|
||||||
const { logGreen } = require('./utils')
|
|
||||||
const tinyVueReg = /@opentiny\//
|
|
||||||
|
|
||||||
const targetVersion = process.argv[2] || JSON.parse(fs.readFileSync(path.join(ROOT_PATH, pkgJsonFileName)).toString()).version
|
|
||||||
|
|
||||||
const isUpdateDependenciesVersion = true // process.argv[3] === 'true'
|
|
||||||
const single = process.argv[4]
|
|
||||||
const targetVersionArr = targetVersion.split('.')
|
|
||||||
const oldVersion = `${targetVersionArr[0]}.${targetVersionArr[1] - 1}.0`
|
|
||||||
const targetVersionDependencies = `${targetVersionArr[0]}.${targetVersionArr[1]}.0`
|
|
||||||
|
|
||||||
const isTinyVuePkg = (str) => tinyVueReg.test(str || '')
|
|
||||||
|
|
||||||
const replaceDependenciesForTag = (obj) => {
|
|
||||||
for (let key in obj) {
|
|
||||||
if (isTinyVuePkg(key)) {
|
|
||||||
obj[key] = TAG
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
|
|
||||||
const replaceDependencies = (obj) => {
|
|
||||||
for (let key in obj) {
|
|
||||||
if (isTinyVuePkg(key) && /~/.test(obj[key])) {
|
|
||||||
obj[key] = obj[key].replace(isUpdateDependenciesVersion ? /[0-9]+\.[0-9]+\.[0-9]+/ : oldVersion, targetVersionDependencies)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
|
|
||||||
const buidPackages = (dirs) => {
|
|
||||||
let uiArr
|
|
||||||
|
|
||||||
if (single) {
|
|
||||||
uiArr = single.trim().split(' ')
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.readdirSync(dirs).forEach((name) => {
|
|
||||||
if (uiArr && !uiArr.includes(name)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const component = path.join(dirs, name)
|
|
||||||
|
|
||||||
if (name === 'src' || !fs.statSync(component).isDirectory()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let pkgJsonFile, pkgJson
|
|
||||||
|
|
||||||
try {
|
|
||||||
pkgJsonFile = path.join(component, pkgJsonFileName)
|
|
||||||
pkgJson = JSON.parse(fs.readFileSync(pkgJsonFile).toString())
|
|
||||||
} catch (error) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isTinyVuePkg(pkgJson.name)) {
|
|
||||||
const arr = ['dependencies', 'devDependencies']
|
|
||||||
|
|
||||||
pkgJson.version = single || isFullVersionUpdate ? targetVersion : targetVersionDependencies
|
|
||||||
|
|
||||||
arr.forEach((key) => {
|
|
||||||
if (pkgJson[key]) {
|
|
||||||
pkgJson[key] = TAG ? replaceDependenciesForTag(pkgJson[key]) : replaceDependencies(pkgJson[key])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
fs.writeFileSync(pkgJsonFile, JSON.stringify(pkgJson, null, 2))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === 'chart') {
|
|
||||||
buidPackages(component)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!targetVersion) {
|
|
||||||
throw new Error('targetVersion is null, cmd example:\n npm run build:version 3.10.0 true "alert grid"')
|
|
||||||
}
|
|
||||||
|
|
||||||
const buildCommon = () => {
|
|
||||||
const pkgJsonFile = path.join(ROOT_PATH, pkgJsonFileName)
|
|
||||||
const pkgJson = JSON.parse(fs.readFileSync(pkgJsonFile).toString())
|
|
||||||
|
|
||||||
pkgJson.version = targetVersion
|
|
||||||
pkgJson.uiVersion = isFullVersionUpdate ? targetVersion : targetVersionDependencies
|
|
||||||
pkgJson.srcVersion = isFullVersionUpdate ? targetVersion : targetVersionDependencies
|
|
||||||
|
|
||||||
fs.writeFileSync(pkgJsonFile, JSON.stringify(pkgJson, null, 2))
|
|
||||||
logGreen('update src version done')
|
|
||||||
}
|
|
||||||
|
|
||||||
const build = () => {
|
|
||||||
buildCommon()
|
|
||||||
|
|
||||||
if (TYPE === 'ui') {
|
|
||||||
buidPackages(packages)
|
|
||||||
logGreen('update all component version done')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
build()
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
const fs = require('fs-extra')
|
|
||||||
const vue = require('rollup-plugin-vue')
|
|
||||||
const { babel } = require('@rollup/plugin-babel')
|
|
||||||
const alias = require('@rollup/plugin-alias')
|
|
||||||
const commonjs = require('@rollup/plugin-commonjs')
|
|
||||||
const postcss = require('rollup-plugin-postcss')
|
|
||||||
const { nodeResolve } = require('@rollup/plugin-node-resolve')
|
|
||||||
const { pathJoin } = require('./utils')
|
|
||||||
const { getAllModules } = require('./module-utils')
|
|
||||||
|
|
||||||
const external = [
|
|
||||||
'vue',
|
|
||||||
'quill',
|
|
||||||
'./pc',
|
|
||||||
'echarts',
|
|
||||||
'echarts-amap',
|
|
||||||
'./mobile',
|
|
||||||
'@vue/composition-api',
|
|
||||||
'echarts-liquidfill',
|
|
||||||
'echarts-wordcloud',
|
|
||||||
'@opentiny/vue-common',
|
|
||||||
'@opentiny/vue-locale',
|
|
||||||
'@opentiny/vue-renderless'
|
|
||||||
]
|
|
||||||
|
|
||||||
const globals = {
|
|
||||||
vue: 'Vue',
|
|
||||||
'echarts-amap': 'echarts.amap',
|
|
||||||
'echarts-liquidfill': 'echarts-liquidfill',
|
|
||||||
'echarts-wordcloud': 'echarts-wordcloud',
|
|
||||||
'@vue/composition-api': 'vueCompositionApi',
|
|
||||||
'@opentiny/vue-common': 'TinyVueCommon',
|
|
||||||
'@opentiny/vue-locale': 'TinyVueLocale',
|
|
||||||
'@opentiny/vue-renderless': 'TinyRenderLess'
|
|
||||||
}
|
|
||||||
|
|
||||||
const aliasList = {}
|
|
||||||
const components = getAllModules(false)
|
|
||||||
|
|
||||||
components.forEach((item) => {
|
|
||||||
aliasList[item.libName] = pathJoin('../' + item.path)
|
|
||||||
|
|
||||||
if (item.private) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const isComponent = item.type === 'component'
|
|
||||||
|
|
||||||
external.push(item.importName) // @opentiny/vue-todo
|
|
||||||
external.push(item.libName) // @opentiny/vue/todo
|
|
||||||
globals[item.libName] = item.global // TinyTodo
|
|
||||||
|
|
||||||
if (isComponent) {
|
|
||||||
if (fs.existsSync(pathJoin('../../tiny-vue-theme'))) {
|
|
||||||
aliasList[`@opentiny/vue-theme/${item.LowerName}/index.css`] = pathJoin(`../../tiny-vue-theme/src/${item.LowerName}/index.css`)
|
|
||||||
aliasList[`@opentiny/vue-theme/${item.LowerName}/index.js`] = pathJoin(`../../tiny-vue-theme/src/${item.LowerName}/index.js`)
|
|
||||||
}
|
|
||||||
external.push(item.libName + '/index.js')
|
|
||||||
} else {
|
|
||||||
external.push(item.libName + '.js')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
exports.aliasList = aliasList
|
|
||||||
|
|
||||||
exports.external = (deps) => external.includes(deps) || /^@opentiny[\\/](vue-renderless|vue-theme|vue-common|vue-icon)|echarts|cropperjs|quill/.test(deps)
|
|
||||||
|
|
||||||
exports.globals = globals
|
|
||||||
|
|
||||||
exports.plugins = [
|
|
||||||
alias({
|
|
||||||
resolve: ['.js', '.vue', '.css'],
|
|
||||||
'@opentiny/vue-locale': pathJoin('../packages/locale/index'),
|
|
||||||
'@opentiny/vue-common': pathJoin('../packages/common/index'),
|
|
||||||
...aliasList
|
|
||||||
}),
|
|
||||||
postcss({
|
|
||||||
extract: false
|
|
||||||
}),
|
|
||||||
vue({
|
|
||||||
css: true
|
|
||||||
}),
|
|
||||||
nodeResolve({
|
|
||||||
extensions: ['.js', '.jsx', '.vue', '.css']
|
|
||||||
}),
|
|
||||||
babel({
|
|
||||||
exclude: /node_modules/,
|
|
||||||
babelrc: false,
|
|
||||||
configFile: false, // 必须为 false 不然会取根文件的 babel.config.js 配置，产生一堆 runtime 代码
|
|
||||||
babelHelpers: 'bundled',
|
|
||||||
comments: false,
|
|
||||||
extensions: ['.js', '.vue', '.jsx'],
|
|
||||||
presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
|
|
||||||
plugins: ['@babel/plugin-syntax-dynamic-import']
|
|
||||||
}),
|
|
||||||
// 如果打包文件中包含 jsx 语法， commonjs 必须放置在 babel 配置下面，否则会报错 PLUGIN_ERROR
|
|
||||||
commonjs()
|
|
||||||
]
|
|
||||||
|
|
@ -1,403 +0,0 @@
|
||||||
/**
|
|
||||||
* 专门用于 modules.json 配置的通用方法
|
|
||||||
* modules.json 作为单组件的清单列表，记录组件类型、路径、是否排除引用、仅支持某种[pc/mobile]模式等
|
|
||||||
*/
|
|
||||||
const { writeFileSync } = require('fs')
|
|
||||||
const moduleMap = require('../modules.json')
|
|
||||||
const { kebabCase, pathJoin, capitalize, prettierFormat, logGreen, capitalizeKebabCase } = require('./utils')
|
|
||||||
|
|
||||||
const realNameMap = {
|
|
||||||
realValue: '__real_value'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 默认的组件模板
|
|
||||||
*/
|
|
||||||
const defaultMode = ['index', 'pc']
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 组件组包名前缀：@opentiny/vue-tag | @opentiny/vue/tag
|
|
||||||
*/
|
|
||||||
const importName = '@opentiny/vue'
|
|
||||||
|
|
||||||
const exampleBase = 'basic-usage.vue'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询没有模板的组件（单层组件）
|
|
||||||
*/
|
|
||||||
const getNoTemplateComponents = () => {
|
|
||||||
const components = []
|
|
||||||
const templates = ['Pc', 'Mobile']
|
|
||||||
|
|
||||||
Object.keys(moduleMap).forEach((key) => {
|
|
||||||
if (!key.endsWith(templates[0]) && !key.endsWith(templates[1]) && !key.startsWith('Chart')) {
|
|
||||||
if (!moduleMap[key + templates[0]] && !moduleMap[key + templates[1]]) {
|
|
||||||
components.push(moduleMap[key])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return components
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 判断是否为 PC 组件
|
|
||||||
*/
|
|
||||||
const isPcComponent = (name) => {
|
|
||||||
const componentName = capitalizeKebabCase(name)
|
|
||||||
const moduleInfo = moduleMap[componentName]
|
|
||||||
|
|
||||||
return moduleInfo && moduleInfo.onlyMode !== 'mobile'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 判断是否为 Mobile 组件
|
|
||||||
*/
|
|
||||||
const isMobileComponent = (name) => {
|
|
||||||
const componentName = capitalizeKebabCase(name)
|
|
||||||
const moduleInfo = moduleMap[componentName]
|
|
||||||
|
|
||||||
return moduleInfo && moduleInfo.onlyMode === 'mobile'
|
|
||||||
}
|
|
||||||
|
|
||||||
const setIndex = (obj, key, maxNumberLength, indexArr) => {
|
|
||||||
// 一个字母用3位数代替，没有达到3位用0填充到前面，为了减少差值，在前面设置1
|
|
||||||
const priority =
|
|
||||||
'1' +
|
|
||||||
obj[key]
|
|
||||||
.split('')
|
|
||||||
.map((chart) => String(chart.charCodeAt()).padStart(3, '0'))
|
|
||||||
.join('')
|
|
||||||
.padEnd(maxNumberLength, '0')
|
|
||||||
.substr(0, maxNumberLength)
|
|
||||||
|
|
||||||
// 分段比较 （javascript 超过15位比较失效）
|
|
||||||
obj.priority1 = Number(priority.substr(0, 15))
|
|
||||||
obj.priority2 = Number(priority.substr(15, 30))
|
|
||||||
obj.priority3 = Number(priority.substr(30, 45))
|
|
||||||
obj.priority4 = Number(priority.substr(45, maxNumberLength))
|
|
||||||
|
|
||||||
obj.priority = priority
|
|
||||||
|
|
||||||
indexArr.push(obj)
|
|
||||||
}
|
|
||||||
|
|
||||||
const arrayToObject = (arr, key) => {
|
|
||||||
const sortObj = {}
|
|
||||||
|
|
||||||
for (let i = 0, len = arr.length; i < len; i++) {
|
|
||||||
if (arr[i][realNameMap.realValue]) {
|
|
||||||
sortObj[arr[i][key]] = arr[i][realNameMap.realValue]
|
|
||||||
} else {
|
|
||||||
delete arr[i].priority
|
|
||||||
delete arr[i].priority1
|
|
||||||
delete arr[i].priority2
|
|
||||||
delete arr[i].priority3
|
|
||||||
delete arr[i].priority4
|
|
||||||
|
|
||||||
sortObj[arr[i][key]] = arr[i]
|
|
||||||
|
|
||||||
delete sortObj[arr[i][key]][key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return sortObj
|
|
||||||
}
|
|
||||||
|
|
||||||
const sortArray = (arr) => {
|
|
||||||
if (Array.isArray(arr) && arr.length > 1) {
|
|
||||||
const middleIndex = Math.floor(arr.length / 2)
|
|
||||||
const middleValue = arr.splice(middleIndex, 1)[0]
|
|
||||||
const leftArr = []
|
|
||||||
const rightArr = []
|
|
||||||
|
|
||||||
for (let i = 0, len = arr.length; i < len; i++) {
|
|
||||||
const left = arr[i].priority1 - middleValue.priority1
|
|
||||||
const right = arr[i].priority2 - middleValue.priority2
|
|
||||||
const right2 = arr[i].priority3 - middleValue.priority3
|
|
||||||
const right3 = arr[i].priority4 - middleValue.priority4
|
|
||||||
|
|
||||||
let isLeft = false
|
|
||||||
|
|
||||||
if (left === 0 && (right < 0 || (right === 0 && right2 < 0) || (right === 0 && right2 === 0 && right3 < 0))) {
|
|
||||||
isLeft = true
|
|
||||||
}
|
|
||||||
|
|
||||||
if (left < 0 || isLeft) {
|
|
||||||
leftArr.push(arr[i])
|
|
||||||
} else {
|
|
||||||
rightArr.push(arr[i])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return sortArray(leftArr).concat([middleValue], sortArray(rightArr))
|
|
||||||
} else {
|
|
||||||
return arr
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将模块数组按字母的 ASCII 值进行排序（目前只支持16位字母排序）
|
|
||||||
* @private
|
|
||||||
* @param {Array|Object} sortData 模块数组
|
|
||||||
* @param {String} key 排序字段
|
|
||||||
* @param {String} returnType 返回类型 Array|Object
|
|
||||||
* @returns 排序后的数组或对象
|
|
||||||
*/
|
|
||||||
const quickSort = ({ sortData, key = 'name', returnType = 'array' }) => {
|
|
||||||
const maxNumberLength = 59
|
|
||||||
let indexArr = []
|
|
||||||
if (sortData instanceof Array) {
|
|
||||||
sortData.forEach((item) => {
|
|
||||||
setIndex(item, key, maxNumberLength, indexArr)
|
|
||||||
})
|
|
||||||
} else if (typeof sortData === 'object') {
|
|
||||||
for (const sortKey in sortData) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(sortData, sortKey)) {
|
|
||||||
const dataItem = sortData[sortKey]
|
|
||||||
let sortItem = {}
|
|
||||||
|
|
||||||
if (typeof dataItem === 'object') {
|
|
||||||
sortItem = {
|
|
||||||
...sortData[sortKey]
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
sortItem[realNameMap.realValue] = dataItem
|
|
||||||
}
|
|
||||||
sortItem[key] = sortData[key] || sortKey
|
|
||||||
setIndex(sortItem, key, maxNumberLength, indexArr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return sortData
|
|
||||||
}
|
|
||||||
|
|
||||||
return returnType === 'array' ? sortArray(indexArr) : arrayToObject(sortArray(indexArr), key)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据指定条件搜索模块列表，并排序与生成必要字段
|
|
||||||
* @private
|
|
||||||
* @param {Function} filterIntercept 搜索条件
|
|
||||||
* @param {Boolean} isSort 是否需要排序
|
|
||||||
*/
|
|
||||||
const getSortModules = ({ filterIntercept, isSort = true }) => {
|
|
||||||
let modules = []
|
|
||||||
let componentCount = 0
|
|
||||||
if (typeof filterIntercept === 'function') {
|
|
||||||
Object.keys(moduleMap).forEach((key) => {
|
|
||||||
const component = moduleMap[key]
|
|
||||||
component.name = key
|
|
||||||
if (filterIntercept(component) === true && component.exclude !== true) {
|
|
||||||
const dirs = component.path.split('/')
|
|
||||||
const componentName = dirs.slice(1, dirs.indexOf('src'))
|
|
||||||
component.UpperName = componentName.pop().split('-').map(capitalize).join('')
|
|
||||||
component.LowerName = kebabCase({ str: component.UpperName })
|
|
||||||
// 工程的父文件夹
|
|
||||||
component.parentDir = componentName
|
|
||||||
// libPath: 'packages/todo/dist/pc.js' 组件输出路径
|
|
||||||
component.libPath = component.path.replace('/index.js', '/src/index.js').replace('/src/', '/dist/lib/').replace('.vue', '.js')
|
|
||||||
// libName: '@opentiny/vue/todo/pc'
|
|
||||||
component.libName = component.libPath
|
|
||||||
.replace('packages/', '')
|
|
||||||
.replace('/index', '')
|
|
||||||
.replace('.js', '')
|
|
||||||
.replace('/dist/', '/')
|
|
||||||
.replace(/\/lib$/, '')
|
|
||||||
// 处理子目录
|
|
||||||
if (componentName.length) {
|
|
||||||
component.libName = component.libName.replace(componentName.join('/'), '').replace(/^\//, '')
|
|
||||||
}
|
|
||||||
// importName: '@opentiny/vue-tag/pc'
|
|
||||||
component.importName = importName + '-' + component.libName
|
|
||||||
// libName: '@opentiny/vue/todo/pc'
|
|
||||||
component.libName = importName + '/' + component.libName
|
|
||||||
// tmpName: 'pc'
|
|
||||||
component.tmpName = component.libPath.replace('.js', '').split('/').slice(-1)[0]
|
|
||||||
// global: 'TinyTodoPc'
|
|
||||||
component.global = 'Tiny' + key
|
|
||||||
modules.push(component)
|
|
||||||
}
|
|
||||||
component.type === 'component' && componentCount++
|
|
||||||
})
|
|
||||||
logGreen(`[Contain Components]: Total(${componentCount}) `)
|
|
||||||
} else {
|
|
||||||
modules = moduleMap
|
|
||||||
}
|
|
||||||
return isSort ? quickSort({ sortData: modules }) : modules
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取所有模块，并排序、格式化
|
|
||||||
* @param {Boolean} isSort 是否需要排序
|
|
||||||
* @returns 模块对象
|
|
||||||
*/
|
|
||||||
const getAllModules = (isSort) => getSortModules({ filterIntercept: () => true, isSort })
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取所有组件，并排序、格式化
|
|
||||||
* @param {Boolean} isSort 是否需要排序
|
|
||||||
* @returns 组件对象
|
|
||||||
*/
|
|
||||||
const getComponents = (isSort) =>
|
|
||||||
getSortModules({
|
|
||||||
filterIntercept: (item) => !['template'].includes(item.type),
|
|
||||||
isSort
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {String} key 根据模块对象的 Key 获取对应的值
|
|
||||||
* @returns 模块对象
|
|
||||||
*/
|
|
||||||
const getModuleInfo = (key) => moduleMap[key] || {}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将输入的 Map 写入到 modules.json 文件中，并格式化
|
|
||||||
* @param {String|Object} moduleMap 模块 Json 对象集合或 Json 字符串
|
|
||||||
*/
|
|
||||||
const writeModuleMap = (moduleMap) => {
|
|
||||||
writeFileSync(
|
|
||||||
pathJoin('..', 'modules.json'),
|
|
||||||
prettierFormat({
|
|
||||||
str: typeof componentMap === 'string' ? moduleMap : JSON.stringify(moduleMap),
|
|
||||||
options: {
|
|
||||||
parser: 'json',
|
|
||||||
printWidth: 10
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 读取 modules.json 中的模块信息
|
|
||||||
* @returns 模块对象
|
|
||||||
*/
|
|
||||||
const readModuleMap = () => moduleMap || {}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取模块项的模块
|
|
||||||
* @param {String} componentName 组件名称（大写，例如：ImgPreview）
|
|
||||||
* @param {String} templateName 模板名称/路径
|
|
||||||
* @param {Oject} newObj 新增对象
|
|
||||||
* @returns 模块对象
|
|
||||||
*/
|
|
||||||
const addModule = ({ componentName, templateName, newObj = {} }) => {
|
|
||||||
const isEntry = templateName.endsWith('index')
|
|
||||||
|
|
||||||
return {
|
|
||||||
path: `packages/${componentName}/` + (isEntry ? `${templateName}.js` : `src/${templateName}.vue`),
|
|
||||||
type: isEntry ? 'component' : 'template',
|
|
||||||
exclude: false,
|
|
||||||
...newObj
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据指定条件搜索原始模块列表
|
|
||||||
* @private
|
|
||||||
* @param {Function} filterIntercept 搜索条件
|
|
||||||
*/
|
|
||||||
const getModules = (filterIntercept) => {
|
|
||||||
let modules = {}
|
|
||||||
|
|
||||||
if (typeof filterIntercept === 'function') {
|
|
||||||
for (const key in moduleMap) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(moduleMap, key)) {
|
|
||||||
const component = moduleMap[key]
|
|
||||||
|
|
||||||
if (filterIntercept(component) === true && component.exclude !== true) {
|
|
||||||
modules[key] = component
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
modules = moduleMap
|
|
||||||
}
|
|
||||||
|
|
||||||
return modules
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据组件名称查找模块列表
|
|
||||||
* @private
|
|
||||||
* @param {String} name 组件名称
|
|
||||||
* @param {Boolean} inversion 是否取反
|
|
||||||
* @param {Boolean} isOriginal 是否取原始数据
|
|
||||||
* @param {Boolean} isSort 是否需要排序
|
|
||||||
*/
|
|
||||||
const getByName = ({ name, inversion = false, isOriginal = false, isSort = true }) => {
|
|
||||||
const callback = (item) => (inversion ? item.path.indexOf(`/${name}/`) === -1 : item.path.indexOf(`/${name}/`) > -1)
|
|
||||||
|
|
||||||
return isOriginal ? getModules(callback) : getSortModules({ filterIntercept: callback, isSort })
|
|
||||||
}
|
|
||||||
|
|
||||||
const getMobileComponents = () => {
|
|
||||||
const modules = getAllModules()
|
|
||||||
const componentNames = modules.filter((item) => item.tmpName === 'mobile').map((item) => item.UpperName)
|
|
||||||
|
|
||||||
const components = modules.filter(
|
|
||||||
(item) => item.onlyMode === 'mobile' || item.onlyMode === 'all' || (item.type === 'component' && componentNames.includes(item.UpperName))
|
|
||||||
)
|
|
||||||
|
|
||||||
return components
|
|
||||||
}
|
|
||||||
|
|
||||||
const getPcComponents = () => {
|
|
||||||
const modules = getAllModules()
|
|
||||||
|
|
||||||
const components = modules.filter((item) => item.type === 'component' && item.onlyMode !== 'mobile')
|
|
||||||
|
|
||||||
return components
|
|
||||||
}
|
|
||||||
|
|
||||||
const getOnlyMobileComponents = () => getAllModules().filter((item) => item.onlyMode === 'mobile')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态创建 modules.json ，适配新建组件
|
|
||||||
* @param {String} componentName 组件名称 （驼峰大写：img-preview）
|
|
||||||
* @param {Boolean} isMobile 是否为移动组件
|
|
||||||
*/
|
|
||||||
const createModuleMapping = (componentName, templateName, isMobile = false) => {
|
|
||||||
const upperName = capitalizeKebabCase(componentName)
|
|
||||||
|
|
||||||
// 生成 modules.json 文件
|
|
||||||
moduleMap[upperName] = addModule({
|
|
||||||
isMobile,
|
|
||||||
templateName,
|
|
||||||
componentName
|
|
||||||
})
|
|
||||||
|
|
||||||
const moduleJson = quickSort({ sortData: moduleMap, returnType: 'object' })
|
|
||||||
|
|
||||||
writeFileSync(
|
|
||||||
pathJoin('..', 'modules.json'),
|
|
||||||
prettierFormat({
|
|
||||||
str: JSON.stringify(moduleJson),
|
|
||||||
options: {
|
|
||||||
parser: 'json',
|
|
||||||
printWidth: 10
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
quickSort,
|
|
||||||
getByName,
|
|
||||||
addModule,
|
|
||||||
importName,
|
|
||||||
exampleBase,
|
|
||||||
defaultMode,
|
|
||||||
createModuleMapping,
|
|
||||||
isPcComponent,
|
|
||||||
getAllModules,
|
|
||||||
getComponents,
|
|
||||||
getModuleInfo,
|
|
||||||
readModuleMap,
|
|
||||||
writeModuleMap,
|
|
||||||
getPcComponents,
|
|
||||||
isMobileComponent,
|
|
||||||
getMobileComponents,
|
|
||||||
getOnlyMobileComponents,
|
|
||||||
getNoTemplateComponents
|
|
||||||
}
|
|
||||||
|
|
@ -1,202 +0,0 @@
|
||||||
/**
|
|
||||||
* 用于发布单组件包
|
|
||||||
*/
|
|
||||||
const fs = require('fs-extra')
|
|
||||||
const path = require('path')
|
|
||||||
const { execSync } = require('child_process')
|
|
||||||
const utils = require('../build/utils')
|
|
||||||
const { logGreen } = require('../build/utils')
|
|
||||||
|
|
||||||
const sourcePkg = 'packages'
|
|
||||||
const packages = 'dist'
|
|
||||||
const tgzs = 'tgzs'
|
|
||||||
const packageName = 'package.json'
|
|
||||||
const NPM_TAG = process.env.NPM_TAG || '~0.1.0'
|
|
||||||
const VERSION_TAG = process.env.VERSION_TAG || '0.1.0'
|
|
||||||
const NPM_WAREHOUSE = process.env.NPM_WAREHOUSE
|
|
||||||
const targetVersion = utils.getTinyVersion('themeVersion')
|
|
||||||
const targetVersionArr = targetVersion.split('.')
|
|
||||||
const themeVersionDependencies = `~${targetVersionArr[0]}.${targetVersionArr[1]}.${targetVersionArr.slice(-targetVersionArr.length + 2).join('.')}`
|
|
||||||
const typings = 'typings'
|
|
||||||
|
|
||||||
const packPackages = (p, packagePath) => {
|
|
||||||
execSync('npm pack -q', { cwd: path.join(packages, p) })
|
|
||||||
fs.readdirSync(path.join(packages, p)).forEach((item) => {
|
|
||||||
if (item.endsWith('.tgz')) {
|
|
||||||
const tgzPath = path.join(packages, p, item)
|
|
||||||
fs.moveSync(tgzPath, path.join(tgzs, item), { overwrite: true })
|
|
||||||
fs.unlinkSync(packagePath)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理每个组件包的package.json文件
|
|
||||||
const dealPackage = (p, packageJSON) => {
|
|
||||||
const packageDeps = packageJSON.dependencies || []
|
|
||||||
Object.keys(packageDeps).forEach((key) => {
|
|
||||||
if (key.includes('@opentiny/vue')) {
|
|
||||||
packageDeps[key] = NPM_TAG
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let dependencies = {
|
|
||||||
'@opentiny/vue-renderless': themeVersionDependencies,
|
|
||||||
'@opentiny/vue-common': NPM_TAG,
|
|
||||||
'@opentiny/vue-icon': NPM_TAG,
|
|
||||||
'@opentiny/vue-theme': themeVersionDependencies,
|
|
||||||
'@opentiny/vue-theme-mobile': themeVersionDependencies
|
|
||||||
}
|
|
||||||
if (p === 'icon') {
|
|
||||||
packageJSON.dependencies = Object.assign(packageJSON.dependencies || {}, {
|
|
||||||
'@opentiny/vue-common': NPM_TAG,
|
|
||||||
'@opentiny/vue-theme': themeVersionDependencies
|
|
||||||
})
|
|
||||||
} else if (p === 'locale') {
|
|
||||||
dependencies = {
|
|
||||||
'@opentiny/vue-renderless': themeVersionDependencies
|
|
||||||
}
|
|
||||||
} else if (p === 'common') {
|
|
||||||
dependencies = {
|
|
||||||
'@opentiny/vue-renderless': themeVersionDependencies,
|
|
||||||
'@opentiny/vue-theme': themeVersionDependencies
|
|
||||||
}
|
|
||||||
if (VERSION_TAG.startsWith('2')) {
|
|
||||||
dependencies['@vue/composition-api'] = '1.2.2'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
packageJSON.dependencies = Object.assign(packageJSON.dependencies || {}, dependencies)
|
|
||||||
if (VERSION_TAG.startsWith('3')) {
|
|
||||||
packageJSON.types = 'index.d.ts'
|
|
||||||
}
|
|
||||||
packageJSON.sideEffects = false
|
|
||||||
packageJSON.version = VERSION_TAG
|
|
||||||
}
|
|
||||||
|
|
||||||
const release = (p) => {
|
|
||||||
const packagePath = path.join(packages, p, packageName)
|
|
||||||
const packageJSON = fs.readJSONSync(packagePath)
|
|
||||||
const componentEntry = path.join(packagePath, '../lib', 'index.js')
|
|
||||||
dealPackage(p, packageJSON)
|
|
||||||
fs.writeFileSync(packagePath, JSON.stringify(packageJSON, null, 2))
|
|
||||||
if (fs.existsSync(componentEntry)) {
|
|
||||||
let componentEntryContent = fs.readFileSync(componentEntry).toString('UTF-8')
|
|
||||||
componentEntryContent = componentEntryContent.replace('process.env.COMPONENT_VERSION', `'${VERSION_TAG}'`)
|
|
||||||
fs.writeFileSync(componentEntry, componentEntryContent)
|
|
||||||
}
|
|
||||||
logGreen(`${p} pack done`)
|
|
||||||
|
|
||||||
// 测试情况下可以打包成压缩包
|
|
||||||
if (NPM_WAREHOUSE === 'test') {
|
|
||||||
packPackages(p, packagePath)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const dealFile = (componentDir, distDir) => {
|
|
||||||
if (componentDir.includes('common')) {
|
|
||||||
// 如果是vue3.0的打包命令下
|
|
||||||
if (VERSION_TAG.startsWith('3')) {
|
|
||||||
// 删除 vue2.0文件
|
|
||||||
fs.removeSync(path.join(distDir, 'adapter/vue2.js'))
|
|
||||||
// 重写adapter/index.js
|
|
||||||
fs.copySync(path.join(__dirname, '../', 'template/common/vue3.js'), path.join(distDir, 'adapter/index.js'))
|
|
||||||
} else {
|
|
||||||
// 删除 vue3.0文件
|
|
||||||
fs.removeSync(path.join(distDir, 'adapter/vue3.js'))
|
|
||||||
// 重写adapter/index.js
|
|
||||||
fs.copySync(path.join(__dirname, '../', 'template/common/vue2.js'), path.join(distDir, 'adapter/index.js'))
|
|
||||||
}
|
|
||||||
} else if (componentDir.includes('locale')) {
|
|
||||||
// 如果是vue3.0的打包命令下
|
|
||||||
if (VERSION_TAG.startsWith('3')) {
|
|
||||||
// 删除 vue2.0文件
|
|
||||||
fs.removeSync(path.join(distDir, 'vue2.js'))
|
|
||||||
// 重写index.js
|
|
||||||
fs.copySync(path.join(__dirname, '../', 'template/locale/vue3.js'), path.join(distDir, 'index.js'))
|
|
||||||
} else {
|
|
||||||
// 删除 vue3.0文件
|
|
||||||
fs.removeSync(path.join(distDir, 'vue3.js'))
|
|
||||||
// 重写index.js
|
|
||||||
fs.copySync(path.join(__dirname, '../', 'template/locale/vue2.js'), path.join(distDir, 'index.js'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// chart文件夹处理
|
|
||||||
|
|
||||||
const releaseChart = (componentDir, item) => {
|
|
||||||
fs.readdirSync(componentDir).forEach((child) => {
|
|
||||||
const stat = fs.statSync(path.join(componentDir, child))
|
|
||||||
|
|
||||||
if (stat.isDirectory()) {
|
|
||||||
const distPath = path.join(sourcePkg, item, child, packages)
|
|
||||||
const packageJson = path.join(sourcePkg, item, child, packageName)
|
|
||||||
|
|
||||||
const typingsPath = path.join(typings, item, child)
|
|
||||||
|
|
||||||
if (fs.existsSync(typingsPath) && VERSION_TAG.startsWith('3')) {
|
|
||||||
fs.copySync(typingsPath, path.join(packages, item), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.existsSync(distPath)) {
|
|
||||||
fs.copySync(distPath, path.join(packages, item, child), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
fs.copySync(packageJson, path.join(packages, item, child, packageName), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fs.copySync(componentDir, path.join(packages, item, child), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
release(path.join(item, child))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 读取packages文件夹下的所有组件，并执行copy操作
|
|
||||||
const releaseAll = () => {
|
|
||||||
fs.readdirSync(path.join(sourcePkg)).forEach((item) => {
|
|
||||||
const componentDir = path.join(sourcePkg, item)
|
|
||||||
const stat = fs.statSync(componentDir)
|
|
||||||
|
|
||||||
if (stat.isDirectory()) {
|
|
||||||
const distPath = path.join(sourcePkg, item, packages)
|
|
||||||
const packageJson = path.join(sourcePkg, item, packageName)
|
|
||||||
const typingsPath = path.join(typings, item)
|
|
||||||
|
|
||||||
if (fs.existsSync(typingsPath) && VERSION_TAG.startsWith('3')) {
|
|
||||||
fs.copySync(typingsPath, path.join(packages, item), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.existsSync(distPath)) {
|
|
||||||
fs.copySync(distPath, path.join(packages, item), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
fs.copySync(packageJson, path.join(packages, item, packageName), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// 如果packags包里面没有dist目录，则copy整个目录，比如common local等适配层
|
|
||||||
fs.copySync(componentDir, path.join(packages, item), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
|
|
||||||
// 处理common和locale包，分别针对vue2和vue3
|
|
||||||
dealFile(componentDir, path.join(packages, item))
|
|
||||||
}
|
|
||||||
|
|
||||||
release(item)
|
|
||||||
if (item === 'chart') {
|
|
||||||
releaseChart(componentDir, item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
logGreen('-- all release done --')
|
|
||||||
}
|
|
||||||
|
|
||||||
releaseAll()
|
|
||||||
104
build/release.js
104
build/release.js
|
|
@ -1,104 +0,0 @@
|
||||||
/**
|
|
||||||
* 用于发布 @opentiny/vue 包
|
|
||||||
*/
|
|
||||||
const fs = require('fs-extra')
|
|
||||||
const path = require('path')
|
|
||||||
const semver = require('semver')
|
|
||||||
const sourcePkg = 'packages'
|
|
||||||
const source = 'dist'
|
|
||||||
const packageName = 'package.json'
|
|
||||||
const typings = 'typings'
|
|
||||||
const packagePath = path.join(source, packageName)
|
|
||||||
const packageJSON = fs.readJSONSync(packageName)
|
|
||||||
|
|
||||||
const keys = [
|
|
||||||
'name',
|
|
||||||
'version',
|
|
||||||
'description',
|
|
||||||
'main',
|
|
||||||
'files',
|
|
||||||
'sideEffects',
|
|
||||||
'author',
|
|
||||||
'license',
|
|
||||||
'home',
|
|
||||||
'repository',
|
|
||||||
'homepage',
|
|
||||||
'keywords',
|
|
||||||
'dependencies',
|
|
||||||
'engines',
|
|
||||||
'browserslist'
|
|
||||||
]
|
|
||||||
|
|
||||||
const NPM_TAG = process.env.NPM_TAG
|
|
||||||
// 命令行中指定的版本号
|
|
||||||
const VERSION_TAG = process.env.VERSION_TAG
|
|
||||||
|
|
||||||
for (let key in packageJSON) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(packageJSON, key)) {
|
|
||||||
!~keys.indexOf(key) && delete packageJSON[key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 配置指定的版本号
|
|
||||||
if (VERSION_TAG) {
|
|
||||||
packageJSON.version = VERSION_TAG
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据modules.json生成所有组件列表信息
|
|
||||||
const genDependencies = () => {
|
|
||||||
const { getComponents } = require('../build/module-utils')
|
|
||||||
let dependencies = {}
|
|
||||||
|
|
||||||
getComponents(false).forEach((component) => {
|
|
||||||
const packPath = component.path.replace(/index\.js$/, 'package.json')
|
|
||||||
|
|
||||||
if (!fs.existsSync(packPath)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (NPM_TAG) {
|
|
||||||
dependencies[component.importName] = NPM_TAG
|
|
||||||
} else {
|
|
||||||
let { version } = fs.readJSONSync(packPath)
|
|
||||||
|
|
||||||
if (version) {
|
|
||||||
const major = semver.major(version)
|
|
||||||
const minor = semver.minor(version)
|
|
||||||
|
|
||||||
version = `${major}.${minor}.0`
|
|
||||||
dependencies[component.importName] = '~' + version
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return dependencies
|
|
||||||
}
|
|
||||||
|
|
||||||
if (VERSION_TAG.startsWith('3')) {
|
|
||||||
packageJSON.types = 'index.d.ts'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据组件列表信息重新package.json的dependencies信息
|
|
||||||
packageJSON.dependencies = Object.assign(packageJSON.dependencies || {}, genDependencies())
|
|
||||||
|
|
||||||
fs.writeFileSync(packagePath, JSON.stringify(packageJSON, null, 2))
|
|
||||||
fs.copySync(packagePath, path.join(source, 'vue', packageName), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
|
|
||||||
// 拷贝 README 文件
|
|
||||||
fs.copySync('README.md', path.join(source, 'README.md'))
|
|
||||||
fs.copySync('README.md', path.join(source, 'vue', 'README.md'))
|
|
||||||
|
|
||||||
const entrys = ['pc.js', 'mobile.js', 'index.js']
|
|
||||||
|
|
||||||
entrys.forEach((name) => {
|
|
||||||
fs.copySync(path.join(sourcePkg, name), path.join(source, 'vue', name), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
if (VERSION_TAG.startsWith('3')) {
|
|
||||||
fs.copySync(path.join(typings, name.replace('.js', '.d.ts')), path.join(source, 'vue', name.replace('.js', '.d.ts')), {
|
|
||||||
overwrite: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
const commonjs = require('@rollup/plugin-commonjs')
|
|
||||||
const { nodeResolve } = require('@rollup/plugin-node-resolve')
|
|
||||||
const vue = require('rollup-plugin-vue')
|
|
||||||
const { babel } = require('@rollup/plugin-babel')
|
|
||||||
const { pathJoin, logGreen, logRed } = require('../../build/utils')
|
|
||||||
const rollup = require('rollup')
|
|
||||||
const svgVue = require('./rollup-vue3-svg')
|
|
||||||
const fs = require('fs-extra')
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
const inputOptions = {
|
|
||||||
plugins: [
|
|
||||||
vue({
|
|
||||||
css: true
|
|
||||||
}),
|
|
||||||
svgVue({}),
|
|
||||||
nodeResolve(),
|
|
||||||
babel({
|
|
||||||
exclude: /node_modules/,
|
|
||||||
babelrc: false,
|
|
||||||
configFile: false, // 必须为 false 不然会取根文件的 babel.config.js 配置，产生一堆 runtime 代码
|
|
||||||
babelHelpers: 'bundled',
|
|
||||||
extensions: ['.js', '.vue'],
|
|
||||||
presets: ['@babel/preset-env'],
|
|
||||||
plugins: ['@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from']
|
|
||||||
}),
|
|
||||||
// 如果打包文件中包含 jsx 语法， commonjs 必须放置在 babel 配置下面，否则会报错 PLUGIN_ERROR
|
|
||||||
commonjs()
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const outputOptions = {
|
|
||||||
format: 'es',
|
|
||||||
exports: 'named'
|
|
||||||
}
|
|
||||||
|
|
||||||
const build = (icons) => {
|
|
||||||
icons.forEach((itconComponent) => {
|
|
||||||
const inputs3 = { ...inputOptions }
|
|
||||||
|
|
||||||
inputs3.input = pathJoin('..', 'packages', 'icon', itconComponent.path)
|
|
||||||
|
|
||||||
if (itconComponent.path === 'index.js') {
|
|
||||||
inputs3.external = (deps) => !deps.includes('index.js')
|
|
||||||
} else if (itconComponent.path === 'lowercase.js') {
|
|
||||||
inputs3.external = (deps) => !deps.includes('lowercase.js')
|
|
||||||
} else {
|
|
||||||
inputs3.external = (deps) => !/@opentiny[\\/]vue-theme/.test(deps) && !deps.includes('index.js')
|
|
||||||
}
|
|
||||||
|
|
||||||
rollup
|
|
||||||
.rollup(inputs3)
|
|
||||||
.then((bundle) => {
|
|
||||||
const outs = { ...outputOptions }
|
|
||||||
outs.file = pathJoin('..', 'packages', 'icon', itconComponent.libPath)
|
|
||||||
bundle.write(outs)
|
|
||||||
logGreen(`${itconComponent.path} compile icon done`)
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
logRed(e)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function createComponentMap(iconDir) {
|
|
||||||
const components = []
|
|
||||||
fs.readdirSync(iconDir).forEach((iconFile) => {
|
|
||||||
if (['dist', 'runtime'].includes(iconFile)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.statSync(path.join(iconDir, iconFile)).isDirectory()) {
|
|
||||||
components.push({
|
|
||||||
path: `${iconFile}/index.js`,
|
|
||||||
libPath: `dist/lib/${iconFile}.js`
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
iconFile.endsWith('.js') &&
|
|
||||||
components.push({
|
|
||||||
path: `${iconFile}`,
|
|
||||||
libPath: `dist/lib/${iconFile}`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return components
|
|
||||||
}
|
|
||||||
|
|
||||||
build(createComponentMap(pathJoin('..', 'packages', 'icon')))
|
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
const fs = require('fs-extra')
|
|
||||||
const { babel } = require('@rollup/plugin-babel')
|
|
||||||
const vue = require('rollup-plugin-vue')
|
|
||||||
const alias = require('@rollup/plugin-alias')
|
|
||||||
const commonjs = require('@rollup/plugin-commonjs')
|
|
||||||
const postcss = require('rollup-plugin-postcss')
|
|
||||||
const { nodeResolve } = require('@rollup/plugin-node-resolve')
|
|
||||||
const { pathJoin } = require('../../build/utils')
|
|
||||||
const { getAllModules } = require('../../build/module-utils')
|
|
||||||
|
|
||||||
const external = [
|
|
||||||
'vue',
|
|
||||||
'./pc',
|
|
||||||
'./mobile',
|
|
||||||
'@opentiny/vue-common',
|
|
||||||
'echarts',
|
|
||||||
'echarts-amap',
|
|
||||||
'@opentiny/vue-locale',
|
|
||||||
'quill',
|
|
||||||
'@vue/composition-api',
|
|
||||||
'@opentiny/vue-renderless'
|
|
||||||
]
|
|
||||||
|
|
||||||
const globals = {
|
|
||||||
vue: 'Vue',
|
|
||||||
'@vue/composition-api': 'vueCompositionApi',
|
|
||||||
'@opentiny/vue-locale': 'TinyVueLocale',
|
|
||||||
'@opentiny/vue-common': 'TinyVueCommon',
|
|
||||||
'echarts-amap': 'echarts.amap',
|
|
||||||
'echarts-liquidfill': 'echarts-liquidfill',
|
|
||||||
'echarts-wordcloud': 'echarts-wordcloud',
|
|
||||||
'@opentiny/vue-renderless': 'TinyRenderLess'
|
|
||||||
}
|
|
||||||
|
|
||||||
const aliasList = {}
|
|
||||||
const components = getAllModules(false)
|
|
||||||
|
|
||||||
components.forEach((itemComponent) => {
|
|
||||||
aliasList[itemComponent.libName] = pathJoin(`../${itemComponent.path}`)
|
|
||||||
|
|
||||||
if (itemComponent.private) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const isComponent = itemComponent.type === 'component'
|
|
||||||
|
|
||||||
external.push(itemComponent.importName) // @opentiny/vue3-todo
|
|
||||||
external.push(itemComponent.libName) // @opentiny/vue3/todo
|
|
||||||
globals[itemComponent.libName] = itemComponent.global // TinyTodo
|
|
||||||
|
|
||||||
if (isComponent) {
|
|
||||||
if (fs.existsSync(pathJoin('../../tiny-vue-theme'))) {
|
|
||||||
aliasList[`@opentiny/vue-theme/${itemComponent.LowerName}/index.css`] = pathJoin(`../../tiny-vue-theme/style/${itemComponent.LowerName}/index.css`)
|
|
||||||
aliasList[`@opentiny/vue-theme/${itemComponent.LowerName}/index.js`] = pathJoin(`../../tiny-vue-theme/style/${itemComponent.LowerName}/index.js`)
|
|
||||||
}
|
|
||||||
external.push(`${itemComponent.libName}/index.js`)
|
|
||||||
} else {
|
|
||||||
external.push(`${itemComponent.libName}.js`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
exports.aliasList = aliasList
|
|
||||||
|
|
||||||
exports.external = (deps) => external.includes(deps) || /^@opentiny[\\/](\vue-renderless|\vue-theme|\vue-common|\vue-icon)|echarts|cropperjs|quill/.test(deps)
|
|
||||||
|
|
||||||
exports.globalsMap = globals
|
|
||||||
|
|
||||||
const op = {
|
|
||||||
resolve: ['.js', '.vue', '.css'],
|
|
||||||
extract: false,
|
|
||||||
css: true,
|
|
||||||
extensions: ['.js', '.jsx', '.vue', '.css']
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.plugins = [
|
|
||||||
alias({
|
|
||||||
resolve: op.resolve,
|
|
||||||
'@opentiny/vue-locale': pathJoin('../packages/locale/index'),
|
|
||||||
'@opentiny/vue-common': pathJoin('../packages/common/index'),
|
|
||||||
...aliasList
|
|
||||||
}),
|
|
||||||
postcss({
|
|
||||||
extract: op.extract
|
|
||||||
}),
|
|
||||||
vue({
|
|
||||||
css: op.css
|
|
||||||
}),
|
|
||||||
nodeResolve({
|
|
||||||
extensions: op.extensions
|
|
||||||
}),
|
|
||||||
babel({
|
|
||||||
configFile: false,
|
|
||||||
babelrc: false,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
comments: false,
|
|
||||||
presets: ['@babel/preset-env'],
|
|
||||||
babelHelpers: 'bundled',
|
|
||||||
extensions: ['.js', '.vue', '.jsx'],
|
|
||||||
plugins: ['@babel/plugin-syntax-dynamic-import', '@vue/babel-plugin-jsx']
|
|
||||||
}),
|
|
||||||
commonjs()
|
|
||||||
]
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
.content .tiny-mobile-tabbar-demo {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-tabbar-demo .tiny-mobile-tabbar--fixed {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dialog-box-demo {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dialog-box-demo .v-modal,
|
|
||||||
.content .tiny-mobile-dialog-box__wrapper {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo {
|
|
||||||
height: 610px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-wrap {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction {
|
|
||||||
height: 300px;
|
|
||||||
top: 380px;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-filter {
|
|
||||||
justify-content: left;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo .tiny-mobile-dropdown-item {
|
|
||||||
position: absolute;
|
|
||||||
width: 351px;
|
|
||||||
left: 0;
|
|
||||||
top: 42px !important;
|
|
||||||
}
|
|
||||||
.content
|
|
||||||
.tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction
|
|
||||||
.tiny-mobile-dropdown-item {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
right: 648px;
|
|
||||||
bottom: 0 !important;
|
|
||||||
top: 40px !important;
|
|
||||||
overflow: inherit;
|
|
||||||
}
|
|
||||||
.content
|
|
||||||
.tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction
|
|
||||||
.tiny-mobile-dropdown-item__content {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.content
|
|
||||||
.tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-wrap
|
|
||||||
.tiny-mobile-dropdown-item {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo .tiny-popup {
|
|
||||||
width: 351px;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-wrap .tiny-popup {
|
|
||||||
height: auto;
|
|
||||||
max-height: initial;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-dropdown-menu-demo .tiny-overlay {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.content
|
|
||||||
.tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction
|
|
||||||
.tiny-overlay {
|
|
||||||
top: 407px !important;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-image-viewer-demo {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-image-viewer-demo .tiny-mobile-image-viewer__wrapper {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-exception-demo {
|
|
||||||
height: 610px;
|
|
||||||
background: #ccc;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-exception-demo .tiny-mobile-exception {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
.content .tiny-mobile-exception-demo .tiny-mobile-exception__footer {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.tiny-mobile-mini-picker-demo {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.tiny-mobile-mini-picker-demo .tiny-mobile-mini-picker {
|
|
||||||
height: calc(100% - 48px);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.tiny-mobile-mini-picker-demo.mini-picker-wrap .tiny-mobile-mini-picker {
|
|
||||||
height: calc(100% - 200px);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.tiny-mobile-mini-picker-demo .tiny-mobile-button,
|
|
||||||
.tiny-mobile-mini-picker-demo .tiny-mobile-mini-picker__mask,
|
|
||||||
.tiny-mobile-mini-picker-demo .tiny-mobile-mini-picker__content {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.tiny-mobile-mini-picker-demo .tiny-mobile-input-form__input {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="button-wrap">
|
|
||||||
<tiny-button round>默认尺寸</tiny-button>
|
|
||||||
<tiny-button type="primary" size="large" round>large</tiny-button>
|
|
||||||
<tiny-button type="success" size="medium" round>medium</tiny-button>
|
|
||||||
<tiny-button type="info" size="small" round>small</tiny-button>
|
|
||||||
<tiny-button type="warning" size="mini" round>mini</tiny-button>
|
|
||||||
<tiny-button type="primary" size="large" round>大号按钮</tiny-button>
|
|
||||||
<tiny-button type="success" size="medium" round>中号按钮</tiny-button>
|
|
||||||
<tiny-button type="info" size="small" round>小号按钮</tiny-button>
|
|
||||||
<tiny-button type="warning" size="mini" round>mini按钮</tiny-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.button-wrap {
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.button-wrap .tiny-mobile-button {
|
|
||||||
margin-right: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="index-bar-wrapper">
|
|
||||||
<tiny-index-bar :index-list="indexList">
|
|
||||||
<div v-for="item in indexList" :key="item">
|
|
||||||
<tiny-index-bar-anchor :index="item"></tiny-index-bar-anchor>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
</div>
|
|
||||||
</tiny-index-bar>
|
|
||||||
<div class="btn" @click="addData">增加数据</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { IndexBar, IndexBarAnchor } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyIndexBar: IndexBar,
|
|
||||||
TinyIndexBarAnchor: IndexBarAnchor
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
indexList: [],
|
|
||||||
num: 8
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.indexList = Array.from(new Array(this.num), (ele, index) => String.fromCharCode(65 + index))
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addData() {
|
|
||||||
this.num += 2
|
|
||||||
this.indexList = Array.from(new Array(this.num), (ele, index) => String.fromCharCode(65 + index))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.index-bar-wrapper {
|
|
||||||
width: 414px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 50px;
|
|
||||||
left: 50%;
|
|
||||||
background: red;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="index-bar-wrapper">
|
|
||||||
<tiny-index-bar :index-list="indexList" @change="indexChange" @select="selectIndex">
|
|
||||||
<div v-for="item in indexList" :key="item">
|
|
||||||
<tiny-index-bar-anchor :index="item"></tiny-index-bar-anchor>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
<div>内容 {{ item }}</div>
|
|
||||||
</div>
|
|
||||||
</tiny-index-bar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { IndexBar, IndexBarAnchor, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyIndexBar: IndexBar,
|
|
||||||
TinyIndexBarAnchor: IndexBarAnchor
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
indexList: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.indexList = Array.from(new Array(26), (ele, index) => String.fromCharCode(65 + index))
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
indexChange(value) {
|
|
||||||
Modal.message({ message: 'change事件:' + value })
|
|
||||||
},
|
|
||||||
selectIndex(value) {
|
|
||||||
Modal.message({ message: 'select事件:' + value })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.index-bar-wrapper {
|
|
||||||
width: 414px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="baseClick1" :reset-time="0">单按钮无标题</tiny-button>
|
|
||||||
<tiny-button @click="baseClick2" :reset-time="0">单按钮有标题</tiny-button>
|
|
||||||
<tiny-button @click="baseClick3" :reset-time="0">单按钮有标题多行</tiny-button>
|
|
||||||
<tiny-button @click="baseClick4" :reset-time="0">双按钮有标题</tiny-button>
|
|
||||||
<tiny-button @click="baseClick5" :reset-time="0">双按钮无标题</tiny-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal, Notify } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
baseClick1() {
|
|
||||||
Modal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
baseClick2() {
|
|
||||||
Modal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
baseClick3() {
|
|
||||||
Modal.alert({
|
|
||||||
message: '单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
|
|
||||||
title: '标题',
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
baseClick4() {
|
|
||||||
Modal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {
|
|
||||||
Notify({
|
|
||||||
type: 'info',
|
|
||||||
title: '触发回调事件',
|
|
||||||
message: `点击${res}按钮`
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
baseClick5() {
|
|
||||||
Modal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {
|
|
||||||
Notify({
|
|
||||||
type: 'info',
|
|
||||||
title: '触发回调事件',
|
|
||||||
message: `点击${res}按钮`
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击取消按钮时触发事件</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" type="confirm" show-footer @cancel="cancelClick">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
cancelClick() {
|
|
||||||
Modal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeClick() {
|
|
||||||
Modal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击确定按钮触发事件</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" type="confirm" show-footer @confirm="confirmClick">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
confirmClick() {
|
|
||||||
Modal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="baseClick" :reset-time="0">默认3000ms后自动关闭提示框</tiny-button>
|
|
||||||
<tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
|
|
||||||
<tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
baseClick() {
|
|
||||||
Modal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
successClick() {
|
|
||||||
Modal.message({
|
|
||||||
message: '500ms后自动关闭提示框',
|
|
||||||
status: 'success',
|
|
||||||
duration: '500',
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
errorClick() {
|
|
||||||
Modal.message({
|
|
||||||
message: '5000ms后自动关闭提示框',
|
|
||||||
status: 'error',
|
|
||||||
duration: '5000',
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">按 Esc 键可以关闭弹出框</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">自定义脚部</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" show-footer>
|
|
||||||
<template #footer>
|
|
||||||
<tiny-button type="primary" @click="value1 = false" round>我知道了</tiny-button>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">最大化显示</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" :lock-scroll="false" show-footer width="1000">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
<tiny-grid :tooltip-config="{ 'append-to-body': false }" :data="tableData" :auto-resize="true">
|
|
||||||
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
|
||||||
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="name" title="公司名称" show-tip></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="address" title="地址" show-overflow="tooltip"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="created_date" title="创建日期" show-overflow="tooltip"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="city" title="城市文字" show-overflow="tooltip"></tiny-grid-column>
|
|
||||||
</tiny-grid>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal, Grid, GridColumn } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal,
|
|
||||||
TinyGrid: Grid,
|
|
||||||
TinyGridColumn: GridColumn
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false,
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: 'GFD科技YX公司 GFD科技YX公司 GFD科技YX公司 GFD科技YX公司 GFD科技YX公司',
|
|
||||||
city: '福州 福州 福州 福州 福州 福州 福州 福州 福州 福州',
|
|
||||||
address: '中国广东省深圳龙岗区SZ单身公寓',
|
|
||||||
created_date: '2014-04-30 00:56:00 2014-04-30 00:56:00 2014-04-30 00:56:00 2014-04-30 00:56:00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: 'WWW科技YX公司',
|
|
||||||
city: '深圳',
|
|
||||||
address: '深圳福田区',
|
|
||||||
created_date: '2016-07-08 12:36:22'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: 'RFV有限责任公司',
|
|
||||||
city: '中山',
|
|
||||||
address: '深圳福田区',
|
|
||||||
created_date: '2014-02-14 14:14:14'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">在窗口关闭时会触发事件</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" type="confirm" show-footer @hide="hideClick">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
hideClick() {
|
|
||||||
Modal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">不允许重复点击</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
|
|
||||||
|
|
||||||
<tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick" :is-form-reset="false">
|
|
||||||
<tiny-form :model="createData" label-width="100px">
|
|
||||||
<tiny-form-item label="用户名" prop="username">
|
|
||||||
<tiny-input v-model="createData.username"></tiny-input>
|
|
||||||
</tiny-form-item>
|
|
||||||
<tiny-form-item label="密码" prop="password">
|
|
||||||
<tiny-input v-model="createData.password" show-password></tiny-input>
|
|
||||||
</tiny-form-item>
|
|
||||||
</tiny-form>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal, Notify, Form, FormItem, Input } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal,
|
|
||||||
TinyForm: Form,
|
|
||||||
TinyFormItem: FormItem,
|
|
||||||
TinyInput: Input
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false,
|
|
||||||
createData: {
|
|
||||||
username: '',
|
|
||||||
password: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeClick() {
|
|
||||||
Notify({
|
|
||||||
title: 'closeClick事件',
|
|
||||||
message: '点击关闭按钮时触发事件',
|
|
||||||
position: 'top-right'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">不锁住滚动条不要遮罩层</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({
|
|
||||||
message: '不锁住滚动条不要遮罩层',
|
|
||||||
lockScroll: false,
|
|
||||||
mask: false,
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">不锁界面不要遮罩层</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({
|
|
||||||
message: '不锁界面不要遮罩层',
|
|
||||||
lockView: false,
|
|
||||||
mask: false,
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">点击遮罩层可以关闭</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">自定义提示框的内容</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({
|
|
||||||
message: '提示框拖动最小高度为300',
|
|
||||||
resize: true,
|
|
||||||
minHeight: 300,
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({
|
|
||||||
message: '提示框拖动最小宽度为700',
|
|
||||||
resize: true,
|
|
||||||
minWidth: 700,
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">可以拖动调整窗口大小</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({
|
|
||||||
message: '可以拖动调整窗口大小',
|
|
||||||
resize: true,
|
|
||||||
height: 188,
|
|
||||||
width: 366,
|
|
||||||
tiny_mode: 'mobile'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">在窗口显示时触发事件</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" type="confirm" show-footer @show="showClick">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
showClick() {
|
|
||||||
Modal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '不显示底部', showFooter: false, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="baseClick" :reset-time="0">基本提示图标</tiny-button>
|
|
||||||
<tiny-button @click="successClick" :reset-time="0">成功提示图标</tiny-button>
|
|
||||||
<tiny-button @click="warningClick" :reset-time="0">警告提示图标</tiny-button>
|
|
||||||
<tiny-button @click="errorClick" :reset-time="0">错误提示图标</tiny-button>
|
|
||||||
<tiny-button @click="loadingClick" :reset-time="0">加载提示图标</tiny-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
baseClick() {
|
|
||||||
Modal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
successClick() {
|
|
||||||
Modal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
warningClick() {
|
|
||||||
Modal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
errorClick() {
|
|
||||||
Modal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
loadingClick() {
|
|
||||||
Modal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="alertClick" :reset-time="0">alert 弹框</tiny-button>
|
|
||||||
<tiny-button @click="messageClick" :reset-time="0">message 提示框</tiny-button>
|
|
||||||
<tiny-button @click="confirmClick" :reset-time="0">confirm 确认提示框</tiny-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal, Notify } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
alertClick() {
|
|
||||||
Modal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
messageClick() {
|
|
||||||
Modal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
|
|
||||||
},
|
|
||||||
confirmClick() {
|
|
||||||
Modal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {
|
|
||||||
Notify({
|
|
||||||
type: 'info',
|
|
||||||
title: '触发回调事件',
|
|
||||||
message: `点击${res}按钮`
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" :lock-scroll="false" show-footer>
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-button @click="btnClick" :reset-time="0">zIndex的值为500</tiny-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
Modal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<tiny-button @click="value1 = !value1" :reset-time="0">窗口缩放时触发事件</tiny-button>
|
|
||||||
<tiny-modal v-model="value1" type="confirm" resize show-footer @zoom="zoomClick">
|
|
||||||
<template #default>
|
|
||||||
<p>test</p>
|
|
||||||
</template>
|
|
||||||
</tiny-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Button, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyButton: Button,
|
|
||||||
TinyModal: Modal
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
zoomClick() {
|
|
||||||
Modal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,288 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="page__hd">
|
|
||||||
<h1 class="page__title">MultiSelect</h1>
|
|
||||||
<p class="page__desc">下拉选择器</p>
|
|
||||||
</div>
|
|
||||||
<div class="page__content">
|
|
||||||
<tiny-multi-select ref="multiSelect" :dataSource="data" :defaultSelectedArray="defaultSelectedArray" @confirm="confirm" @reset="reset">
|
|
||||||
</tiny-multi-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { MultiSelect } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyMultiSelect: MultiSelect
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
title: '时间',
|
|
||||||
hasFooter: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2020年',
|
|
||||||
value: '0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2020全年',
|
|
||||||
value: '0-0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '年',
|
|
||||||
value: '0-0-0',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020年Q1',
|
|
||||||
value: '0-1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2020年Q1一月',
|
|
||||||
value: '0-1-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020年Q1二月',
|
|
||||||
value: '0-1-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020年Q1三月',
|
|
||||||
value: '0-1-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020年Q2',
|
|
||||||
value: '0-2',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2020年Q2四月',
|
|
||||||
value: '0-2-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020年Q2五月',
|
|
||||||
value: '0-2-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020年Q2六月',
|
|
||||||
value: '0-2-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年',
|
|
||||||
value: '1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2021全年',
|
|
||||||
value: '1-0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '年',
|
|
||||||
value: '1-0-0',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年Q1',
|
|
||||||
value: '1-1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2021年Q1一月',
|
|
||||||
value: '1-1-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年Q1二月',
|
|
||||||
value: '1-1-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年Q1三月',
|
|
||||||
value: '1-1-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年Q2',
|
|
||||||
value: '1-2',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2021年Q2四月',
|
|
||||||
value: '1-2-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年Q2五月',
|
|
||||||
value: '1-2-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2021年Q2六月',
|
|
||||||
value: '1-2-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年',
|
|
||||||
value: '2',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2022全年',
|
|
||||||
value: '2-0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '年',
|
|
||||||
value: '2-0-0',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年Q1',
|
|
||||||
value: '2-1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2022年Q1一月',
|
|
||||||
value: '2-1-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年Q1二月',
|
|
||||||
value: '2-1-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年Q1三月',
|
|
||||||
value: '2-1-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年Q2',
|
|
||||||
value: '2-2',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '2022年Q2四月',
|
|
||||||
value: '2-2-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年Q2五月',
|
|
||||||
value: '2-2-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2022年Q2六月',
|
|
||||||
value: '2-2-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '区域',
|
|
||||||
hasFooter: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '海外',
|
|
||||||
value: '0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '欧洲巴黎',
|
|
||||||
value: '0-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '巴基斯坦',
|
|
||||||
value: '0-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '土耳其',
|
|
||||||
value: '0-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '中国',
|
|
||||||
value: '1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '北京',
|
|
||||||
value: '1-0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '上海',
|
|
||||||
value: '1-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '南京',
|
|
||||||
value: '1-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '云类型',
|
|
||||||
hasFooter: false,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '公有云',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '私有云',
|
|
||||||
value: '1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '伙伴云',
|
|
||||||
value: '2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '公有云1',
|
|
||||||
value: '3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '公有云2',
|
|
||||||
value: '4',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
defaultSelectedArray: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
confirm(...arg) {
|
|
||||||
console.log(...arg)
|
|
||||||
},
|
|
||||||
reset(...arg) {
|
|
||||||
console.log(...arg)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.page__hd {
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
.page__title {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 21px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.page__desc {
|
|
||||||
margin-top: 5px;
|
|
||||||
color: #888;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.page__content {
|
|
||||||
width: 375px;
|
|
||||||
height: 48px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-pull-refresh :pullDown="pullDownRefresh" :animation-duration="1000">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="page__hd">
|
|
||||||
<h1 class="page__title">Refresh</h1>
|
|
||||||
<p class="page__desc">下拉刷新</p>
|
|
||||||
</div>
|
|
||||||
<tiny-pull-refresh :pullDown="pullDownRefresh" success-text="刷新成功" animation-duration="500" success-duration="500">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.page__hd {
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
.page__title {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 21px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.page__desc {
|
|
||||||
margin-top: 5px;
|
|
||||||
color: #888;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-pull-refresh :pullUp="pullUpLoad" :pullDown="pullDownRefresh">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
},
|
|
||||||
pullUpLoad: {
|
|
||||||
pullUpDisabled: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-pull-refresh :pullDown="pullDownRefresh" :pullUp="pullUpLoad">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
headHeight: 100,
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
},
|
|
||||||
pullUpLoad: {
|
|
||||||
footHeight: 100,
|
|
||||||
handler: () => this.handlerPullUpLoad()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handlerPullUpLoad() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-pull-refresh :pullDown="pullDownRefresh" loosing-text="可以了，可以了，别扒拉了！">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-pull-refresh :pullDown="pullDownRefresh" :pullUp="pullUpLoad">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
pullingDownText: '你敢在下拉一点么？',
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
},
|
|
||||||
pullUpLoad: {
|
|
||||||
pullingUpText: '你敢在上拉一点么？',
|
|
||||||
handler: () => this.handlerPullUpLoad()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handlerPullUpLoad() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-pull-refresh ref="refresh" :pullDown="pullDownRefresh" success-duration="3000" success-text="加载完成">
|
|
||||||
<h3>hello pull-refresh</h3>
|
|
||||||
</tiny-pull-refresh>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { PullRefresh } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyPullRefresh: PullRefresh
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pullDownRefresh: {
|
|
||||||
handler: () => this.handlerPullDownRefresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlerPullDownRefresh() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve()
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,168 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="title">普通</div>
|
|
||||||
<tiny-table :columns="columns" :data="tableData"></tiny-table>
|
|
||||||
<div class="title">固定列</div>
|
|
||||||
<tiny-table :columns="columns2" :data="tableData" width="300px"></tiny-table>
|
|
||||||
<div class="title">其它样式</div>
|
|
||||||
<tiny-table :columns="columns3" :data="tableData" width="300px"></tiny-table>
|
|
||||||
<div class="title">无数据</div>
|
|
||||||
<tiny-table :columns="[]" :data="[]" width="200px"></tiny-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Table } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyTable: Table
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
width: 100,
|
|
||||||
title: '业务',
|
|
||||||
field: 'business'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 90,
|
|
||||||
title: '空间（万/年）',
|
|
||||||
field: 'space'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: 'IDC',
|
|
||||||
field: 'idc'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: '阿里云',
|
|
||||||
field: 'aliy'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: '腾讯云',
|
|
||||||
field: 'txy'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns2: [
|
|
||||||
{
|
|
||||||
width: 100,
|
|
||||||
title: '业务',
|
|
||||||
field: 'business',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 110,
|
|
||||||
title: '空间（万/年）',
|
|
||||||
field: 'space',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: 'IDC',
|
|
||||||
field: 'idc'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: '阿里云',
|
|
||||||
field: 'aliy'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: '腾讯云',
|
|
||||||
field: 'txy'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns3: [
|
|
||||||
{
|
|
||||||
width: 30,
|
|
||||||
title: '业务',
|
|
||||||
field: 'business',
|
|
||||||
type: 'index'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 50,
|
|
||||||
title: '空间（万/年）',
|
|
||||||
field: 'space',
|
|
||||||
type: 'selection'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 50,
|
|
||||||
title: 'IDC',
|
|
||||||
field: 'idc',
|
|
||||||
type: 'radio'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: '阿里云',
|
|
||||||
field: 'aliy'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
width: 60,
|
|
||||||
title: '腾讯云',
|
|
||||||
field: 'txy'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
business: '直播/点播源站',
|
|
||||||
space: 80,
|
|
||||||
idc: 80,
|
|
||||||
aliy: '99',
|
|
||||||
txy: '11'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
business: '大数据',
|
|
||||||
space: 80,
|
|
||||||
idc: 80,
|
|
||||||
aliy: '99',
|
|
||||||
txy: '11'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
business: 'web业务',
|
|
||||||
space: 80,
|
|
||||||
idc: 80,
|
|
||||||
aliy: '99',
|
|
||||||
txy: '11'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
business: '应用加速',
|
|
||||||
space: 80,
|
|
||||||
idc: 80,
|
|
||||||
aliy: '99',
|
|
||||||
txy: '11'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
business: '边缘计算',
|
|
||||||
space: 80,
|
|
||||||
idc: 80,
|
|
||||||
aliy: '99',
|
|
||||||
txy: '11'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
business: 'Live/点播源站',
|
|
||||||
space: 80,
|
|
||||||
idc: 80,
|
|
||||||
aliy: '99',
|
|
||||||
txy: '11'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.title {
|
|
||||||
margin: 20px 0 10px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<h2 style="font-size: 16px; margin: 12px 0 24px 8px">基本用法</h2>
|
|
||||||
<div>
|
|
||||||
<tiny-tabs v-model="activeName" :with-add="true" @add="handleadd" :swipeable="true">
|
|
||||||
<tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
|
|
||||||
{{ item.content }}
|
|
||||||
</tiny-tab-item>
|
|
||||||
</tiny-tabs>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Tabs, TabItem } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyTabs: Tabs,
|
|
||||||
TinyTabItem: TabItem
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
Tabs: [
|
|
||||||
{
|
|
||||||
title: '标签 1',
|
|
||||||
name: '1',
|
|
||||||
content: '内容 1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '标签 2',
|
|
||||||
name: '2',
|
|
||||||
content: '内容 2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '标签 3',
|
|
||||||
name: '3',
|
|
||||||
content: '内容 3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '标签 4',
|
|
||||||
name: '4',
|
|
||||||
content: '内容 4'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
activeName: '1',
|
|
||||||
tabIndex: 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleadd() {
|
|
||||||
this.Tabs.push({
|
|
||||||
title: `标签 ${this.tabIndex}`,
|
|
||||||
name: String(this.tabIndex),
|
|
||||||
content: '动态增加tabitem'
|
|
||||||
})
|
|
||||||
this.tabIndex++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,135 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="title">横向步骤条 正向</div>
|
|
||||||
<tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
|
|
||||||
<tiny-time-line :data="data4" type="timeline" :active="timeActive1" @click="timeClick1">
|
|
||||||
<template v-slot:bottom>
|
|
||||||
<div class="text-content">
|
|
||||||
<div class="main-text">标题文字</div>
|
|
||||||
<div class="sub-text">辅助信息文字辅助信息文字辅助信息文字辅助信息文字</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</tiny-time-line>
|
|
||||||
<div class="half-div">
|
|
||||||
<div class="title">竖式步骤条 正向</div>
|
|
||||||
<tiny-time-line :data="data4" type="timeline" vertical :active="timeActive2" @click="timeClick2">
|
|
||||||
<template v-slot:content>
|
|
||||||
<div class="content-view">
|
|
||||||
<div>内容区</div>
|
|
||||||
<div>内容区</div>
|
|
||||||
<div>内容区</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</tiny-time-line>
|
|
||||||
</div>
|
|
||||||
<div class="half-div">
|
|
||||||
<div class="title">竖式步骤条 反向</div>
|
|
||||||
<tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3">
|
|
||||||
<template v-slot:header="{ item }">
|
|
||||||
<div class="header-content">
|
|
||||||
<div class="name">{{ item.name }}</div>
|
|
||||||
<div class="label">标签</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</tiny-time-line>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { TimeLine, Modal } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyTimeLine: TimeLine
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
timeActive1: 1,
|
|
||||||
timeActive2: 0,
|
|
||||||
timeActive3: 0,
|
|
||||||
data3: [
|
|
||||||
{ name: '已下单', state: 'normal', fold: true },
|
|
||||||
{ name: '运输中', state: 'success', fold: false, showFoldBtn: true },
|
|
||||||
{ name: '已签收', state: 'error' },
|
|
||||||
{ name: '已确认收货', state: 'handing' }
|
|
||||||
],
|
|
||||||
data4: [
|
|
||||||
{ name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
|
|
||||||
{ name: '运输中', state: 'success', showFoldBtn: true, fold: true },
|
|
||||||
{ name: '已签收', state: 'error', showFoldBtn: true, fold: true },
|
|
||||||
{ name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
timeClick1(index, node) {
|
|
||||||
this.timeActive1 = index
|
|
||||||
|
|
||||||
Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
|
|
||||||
},
|
|
||||||
timeClick2(index) {
|
|
||||||
this.timeActive2 = index
|
|
||||||
},
|
|
||||||
timeClick3(index) {
|
|
||||||
this.timeActive3 = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.half-div {
|
|
||||||
display: inline-block;
|
|
||||||
width: 49%;
|
|
||||||
margin-top: 60px;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
padding-left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-text {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-text {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #999;
|
|
||||||
width: 80%;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content {
|
|
||||||
display: flex;
|
|
||||||
font-size: 12px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
background: rgba(102, 135, 255, 0.1);
|
|
||||||
height: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
width: 28px;
|
|
||||||
margin-left: 8px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-view {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="demo-content">
|
|
||||||
<div class="title">尺寸</div>
|
|
||||||
<div class="item-content">
|
|
||||||
<tiny-user-head type="label" v-model="name" :size="80" round></tiny-user-head>
|
|
||||||
<tiny-user-head type="label" v-model="name" size="large" round></tiny-user-head>
|
|
||||||
<tiny-user-head type="label" v-model="name" size="medium" round></tiny-user-head>
|
|
||||||
<tiny-user-head type="label" v-model="namePrefix" size="small" round></tiny-user-head>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="title">类型</div>
|
|
||||||
<div class="item-content">
|
|
||||||
<tiny-user-head type="label" v-model="name" :size="80"></tiny-user-head>
|
|
||||||
<tiny-user-head type="icon" :size="80"></tiny-user-head>
|
|
||||||
<tiny-user-head type="image" modelValue="static/images/fruit.jpg" :size="80"></tiny-user-head>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="title">自定义</div>
|
|
||||||
<div class="item-content">
|
|
||||||
<tiny-user-head type="icon" :size="80" backgroundColor="red"></tiny-user-head>
|
|
||||||
<tiny-user-head type="icon" :size="80" backgroundColor="red" round></tiny-user-head>
|
|
||||||
<tiny-user-head type="label" v-model="name" :size="80" messageTotal="20"></tiny-user-head>
|
|
||||||
<tiny-user-head type="label" v-model="name" :size="40" messageTotal="20"></tiny-user-head>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
name: '小明',
|
|
||||||
namePrefix: '小'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.title {
|
|
||||||
margin: 20px 0 10px 0;
|
|
||||||
}
|
|
||||||
.item-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tiny-mobile-user-head {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<tiny-user-head class="head-item" type="label" value="Ai" background-color="#40a9ff" color="#fa8c16"></tiny-user-head>
|
|
||||||
<tiny-user-head class="head-item" type="icon" :background-color="'rgb(250, 140, 22)'" color="rgb(64, 169, 255)"></tiny-user-head>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head type="icon" background-color="var(--ti-common-color-line-active)"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head>
|
|
||||||
<div class="content">
|
|
||||||
<span>
|
|
||||||
<icon-mail></icon-mail>
|
|
||||||
</span>
|
|
||||||
Mail
|
|
||||||
</div>
|
|
||||||
</tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
import { iconMail } from '@opentiny/vue-icon'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead,
|
|
||||||
IconMail: iconMail()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.content {
|
|
||||||
fill: var(--ti-common-color-line-active);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
font-style: oblique;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content svg {
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
import { iconSmile } from '@opentiny/vue-icon'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
IconSmile: iconSmile()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head type="image" :modelValue="imgUrl"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
imgUrl: 'static/images/fruit.jpg'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
text: '文字'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head :message-total="100" :message-upper-limit="99" type="icon"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head :message-total="100" type="icon"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head :message-total="100" message-type="basic" type="icon"></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head type="icon" min></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-grid :data="tableData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
|
|
||||||
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
|
||||||
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="employees" title="公司员工数" :renderer="renderUserHead"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="created_date" title="创建日期"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
|
||||||
<tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
|
|
||||||
</tiny-grid>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="jsx">
|
|
||||||
import { Grid, GridColumn, UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyGrid: Grid,
|
|
||||||
TinyGridColumn: GridColumn
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const mockData = [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: 'GFD科技公司',
|
|
||||||
city: '福州',
|
|
||||||
employees: 800,
|
|
||||||
created_date: '2014-04-30 00:56:00',
|
|
||||||
boole: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: 'WWW科技公司',
|
|
||||||
city: '深圳',
|
|
||||||
employees: 300,
|
|
||||||
created_date: '2016-07-08 12:36:22',
|
|
||||||
boole: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: 'RFV有限责任公司',
|
|
||||||
city: '中山',
|
|
||||||
employees: 1300,
|
|
||||||
created_date: '2014-02-14 14:14:14',
|
|
||||||
boole: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
name: 'TGB科技公司',
|
|
||||||
city: '龙岩',
|
|
||||||
employees: 360,
|
|
||||||
created_date: '2013-01-13 13:13:13',
|
|
||||||
boole: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5',
|
|
||||||
name: 'YHN科技公司',
|
|
||||||
city: '韶关',
|
|
||||||
employees: 810,
|
|
||||||
created_date: '2012-12-12 12:12:12',
|
|
||||||
boole: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '6',
|
|
||||||
name: 'WSX科技公司',
|
|
||||||
city: '黄冈',
|
|
||||||
employees: 800,
|
|
||||||
created_date: '2011-11-11 11:11:11',
|
|
||||||
boole: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '7',
|
|
||||||
name: 'KBG物业公司',
|
|
||||||
city: '赤壁',
|
|
||||||
employees: 400,
|
|
||||||
created_date: '2016-04-30 23:56:00',
|
|
||||||
boole: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '8',
|
|
||||||
name: 'SZ市福德宝网络技术公司',
|
|
||||||
boole: true,
|
|
||||||
city: '厦门',
|
|
||||||
created_date: '2016-06-03 13:53:25',
|
|
||||||
employees: 540
|
|
||||||
}
|
|
||||||
]
|
|
||||||
return {
|
|
||||||
tableData: mockData
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
checkboxEdit(h, { row, column }) {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={row.boole}
|
|
||||||
onChange={(event) => {
|
|
||||||
row[column.property] = event.target.checked
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
renderUserHead(h, { row }) {
|
|
||||||
const UserHeadImg = UserHead
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span>
|
|
||||||
<UserHeadImg class="demo-user-head" type="icon" round min messageTotal={row.employees} />
|
|
||||||
{row.name}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.hae-user-head .message {
|
|
||||||
width: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tiny-grid-body__row {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-user-head {
|
|
||||||
float: left;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-user-head type="icon" round></tiny-user-head>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { UserHead } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyUserHead: UserHead
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-anchor :links="links"></tiny-anchor>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Anchor } from '@opentiny/vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyAnchor: Anchor
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
key: 'basic-usage',
|
|
||||||
link: '#basic-usage',
|
|
||||||
title: 'Basic Usage'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'is-affix',
|
|
||||||
link: '#is-affix',
|
|
||||||
title: 'Is Affix'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'set-container',
|
|
||||||
link: '#set-container',
|
|
||||||
title: 'Set Container'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'event',
|
|
||||||
link: '#event',
|
|
||||||
title: 'Event',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'on-change',
|
|
||||||
link: '#on-change',
|
|
||||||
title: 'On Change'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="wrap">
|
|
||||||
<tiny-anchor :links="links" is-affix></tiny-anchor>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Anchor } from '@opentiny/vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyAnchor: Anchor
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
key: 'basic-usage',
|
|
||||||
link: '#basic-usage',
|
|
||||||
title: 'Basic Usage'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'is-affix',
|
|
||||||
link: '#is-affix',
|
|
||||||
title: 'Is Affix'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'set-container',
|
|
||||||
link: '#set-container',
|
|
||||||
title: 'Set Container'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'event',
|
|
||||||
link: '#event',
|
|
||||||
title: 'Event',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'on-change',
|
|
||||||
link: '#on-change',
|
|
||||||
title: 'On Change'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.wrap {
|
|
||||||
height: 125px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Anchor } from '@opentiny/vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyAnchor: Anchor
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
key: 'basic-usage',
|
|
||||||
link: '#basic-usage',
|
|
||||||
title: 'Basic Usage'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'is-affix',
|
|
||||||
link: '#is-affix',
|
|
||||||
title: 'Is Affix'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'set-container',
|
|
||||||
link: '#set-container',
|
|
||||||
title: 'Set Container'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'event',
|
|
||||||
link: '#event',
|
|
||||||
title: 'Event',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'on-change',
|
|
||||||
link: '#on-change',
|
|
||||||
title: 'On Change'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange(link) {
|
|
||||||
console.log('change', link)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-row>
|
|
||||||
<tiny-col :span="10">
|
|
||||||
<div id="container" class="scroll-container">
|
|
||||||
<div id="section-1" class="section-1">Section 1</div>
|
|
||||||
<div id="section-2" class="section-2">Section 2</div>
|
|
||||||
<div id="section-3" class="section-3">
|
|
||||||
Section 3
|
|
||||||
<div id="section-3-1" class="section-3-1">Section 3-1</div>
|
|
||||||
<div id="section-3-2" class="section-3-2">Section 3-2</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</tiny-col>
|
|
||||||
<tiny-col :span="2">
|
|
||||||
<tiny-anchor :links="links" container-id="#container" @link-click="handleClick" mark-class="is-active-anchor"></tiny-anchor>
|
|
||||||
</tiny-col>
|
|
||||||
</tiny-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Anchor, Row, Col } from '@opentiny/vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyAnchor: Anchor,
|
|
||||||
TinyRow: Row,
|
|
||||||
TinyCol: Col
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
key: 'section-1',
|
|
||||||
link: '#section-1',
|
|
||||||
title: 'Section 1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'section-2',
|
|
||||||
link: '#section-2',
|
|
||||||
title: 'Section 2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'section-3',
|
|
||||||
link: '#section-3',
|
|
||||||
title: 'Section 3',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'section-3-1',
|
|
||||||
link: '#section-3-1',
|
|
||||||
title: 'Section 3-1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'section-3-2',
|
|
||||||
link: '#section-3-2',
|
|
||||||
title: 'Section 3-2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick(e, link) {
|
|
||||||
e.preventDefault()
|
|
||||||
console.log('link', link)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.is-active-anchor {
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
.scroll-container {
|
|
||||||
height: 20vh;
|
|
||||||
border: 2px solid #333;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.section-1 {
|
|
||||||
height: 100vh;
|
|
||||||
background: rgba(125, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.section-2 {
|
|
||||||
height: 100vh;
|
|
||||||
background: rgba(0, 125, 0, 0.1);
|
|
||||||
}
|
|
||||||
.section-3 {
|
|
||||||
background: rgba(0, 0, 125, 0.1);
|
|
||||||
}
|
|
||||||
.section-3-1 {
|
|
||||||
height: 100vh;
|
|
||||||
background: rgba(0, 0, 125, 0.2);
|
|
||||||
}
|
|
||||||
.section-3-2 {
|
|
||||||
height: 100vh;
|
|
||||||
background: rgba(0, 0, 125, 0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-business-slider"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Form 表单
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="Form"></mobile-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 校验提示信息的位置
|
|
||||||
|
|
||||||
默认自动换行，ellipsis：不换行，显示省略号
|
|
||||||
|
|
||||||
<mobile-view link="form/auto-wordwrap"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-ui-avatar wapi-form-user"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## IndexBar 索引
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="IndexBar"></mobile-uxlink>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 基本用法
|
|
||||||
|
|
||||||
<mobile-view link="index-bar/base"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-ui-avatar wapi-form-user"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## IndexBar 索引
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="IndexBar"></mobile-uxlink>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 事件
|
|
||||||
|
|
||||||
<mobile-view link="index-bar/event"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Notice"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 基本用法
|
|
||||||
|
|
||||||
可通过 `Modal.alert` 方法设置弹出框，通过 `Modal.confirm` 方法设置确认弹出框。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/base"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<nova-attributes link="modal"></nova-attributes>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 模态框弹出表单
|
|
||||||
|
|
||||||
模态框弹出表单，关闭模态框的时候，默认重置表单，设置 `is-form-reset` 为false,则关闭模态框的时候不重置表单
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/is-form-reset"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 自动关闭延时
|
|
||||||
|
|
||||||
可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/duration"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 按 Esc 键关闭弹出框
|
|
||||||
|
|
||||||
可通过 `esc-closable` 属性设置是否允许按 Esc 键关闭窗口，默认为 `false`。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/esc-closable"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 取消按钮事件
|
|
||||||
|
|
||||||
点击取消按钮时触发 `cancel` 事件。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/cancel-event"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 关闭按钮事件
|
|
||||||
|
|
||||||
点击关闭按钮时会触发 `close` 事件。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/close-event"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 确定按钮事件
|
|
||||||
|
|
||||||
点击确定按钮时会触发 `confirm` 事件。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/confirm-event"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 窗口关闭事件
|
|
||||||
|
|
||||||
窗口关闭时会触发 `hide` 事件。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/hide-event"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 窗口显示事件
|
|
||||||
|
|
||||||
在窗口显示时会触发 `show` 事件。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/show-event"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 窗口缩放事件
|
|
||||||
|
|
||||||
窗口缩放时会触发 `zoom` 事件。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/zoom-event"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 最大化显示
|
|
||||||
|
|
||||||
可通过 `fullscreen` 属性设置是否最大化显示。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/fullscreen"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 防止重复提示
|
|
||||||
|
|
||||||
如果不想窗口重复点击，可以设置唯一的 `id` 防止重复提示，只对 type=message 有效。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/id"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 自动关闭延时
|
|
||||||
|
|
||||||
Modal嵌套表单使用时，关闭弹窗时，重置表单数据.设置 `is-form-reset` 为 `false`,则关闭弹窗是不重置表单
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/is-form-reset"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 锁住滚动条
|
|
||||||
|
|
||||||
可通过 `lock-scroll` 属性设置是否锁住滚动条，不允许页面滚动。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/lock-scroll"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 锁住页面
|
|
||||||
|
|
||||||
可通过 `lock-view` 属性设置是否锁住页面，不允许窗口之外的任何操作。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/lock-view"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 点击遮罩层关闭窗口
|
|
||||||
|
|
||||||
可通过 `mask-closable` 属性设置是否允许点击遮罩层关闭窗口。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/mask-closable"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 显示遮罩层
|
|
||||||
|
|
||||||
可通过 `mask` 属性设置是否显示遮罩层，默认为 `true`。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/lock-view"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 自定义内容
|
|
||||||
|
|
||||||
可通过 `message` 属性设置窗口的内容。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/message"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 调整窗口大小
|
|
||||||
|
|
||||||
可通过和`width`和`height`设置窗口的宽高，而通过 `resize` 设置是否允许拖动调整窗口大小。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/resize"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 调整窗口大小后窗口显示的最小宽度
|
|
||||||
|
|
||||||
配置 `resize` 可拖拽属性为 `true`后，可通过 `min-width` 属性设置拖拽后窗口的最小宽度。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/min-width"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 调整窗口大小后窗口显示的最小高度
|
|
||||||
|
|
||||||
配置 `resize` 可拖拽属性为 `true`后，可通过 `min-height` 属性设置拖拽后窗口的最小高度。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/min-height"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 不显示底部
|
|
||||||
|
|
||||||
可通过 `showFooter` 属性设置是否显示底部，默认为 `true`。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/showFooter"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 不显示头部
|
|
||||||
|
|
||||||
可通过 `showHeader` 属性设置是否显示头部，默认为 `true`。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/showHeader"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 默认插槽
|
|
||||||
|
|
||||||
可通过 `templete` 设置默认插槽。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/value"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 底部插槽
|
|
||||||
|
|
||||||
可通过 `slot="footer"` 设置底部插槽。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/footer-slot"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### 嵌套 grid
|
|
||||||
|
|
||||||
可通过插槽嵌套 grid
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/grid"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 消息状态
|
|
||||||
|
|
||||||
可通过 `status` 属性设置消息状态，可选值有 `info | success | warning | error | loading`。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/status"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 标题
|
|
||||||
|
|
||||||
可通过 `title` 属性设置窗口的标题。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/title"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 距离顶部的位置
|
|
||||||
|
|
||||||
可通过 `top` 属性设置消息距离顶部的位置，只对 type=message 有效。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/top"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 窗口类型
|
|
||||||
|
|
||||||
可通过 `type` 属性设置窗口类型，可选值 `alert | confirm | message`。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/type"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 绑定值
|
|
||||||
|
|
||||||
可通过 `value/v-model` 属性绑定值。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/value"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-tips-messagebox"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Modal 模态框
|
|
||||||
|
|
||||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 自定义堆叠顺序
|
|
||||||
|
|
||||||
可通过 `zIndex` 属性设置自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）。
|
|
||||||
|
|
||||||
<nova-demo-view link="modal/zIndex"></nova-demo-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-multi-select"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## MultiSelect 下拉选择器
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="MultiSelect"></mobile-uxlink>
|
|
||||||
|
|
||||||
下拉多选
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 基本用法
|
|
||||||
|
|
||||||
|
|
||||||
<mobile-view link="multi-select/basic-usage"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<mobile-attributes link="multi-select"></mobile-attributes>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-ui-pull-refresh"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## pull-refresh 刷新
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 可刷新的弹回动画时间
|
|
||||||
|
|
||||||
<mobile-view link="pull-refresh/animation-duration"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-ui-pull-refresh"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## pull-refresh 刷新
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 基本展示
|
|
||||||
|
|
||||||
<mobile-view link="pull-refresh/base"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<mobile-attributes link="pull-refresh"></mobile-attributes>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-ui-pull-refresh"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## pull-refresh 刷新
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 禁用刷新
|
|
||||||
|
|
||||||
<mobile-view link="pull-refresh/disabled"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<div class="demo-header">
|
|
||||||
<p class="overviewicon">
|
|
||||||
<span class="wapi-ui-pull-refresh"/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## pull-refresh 刷新
|
|
||||||
|
|
||||||
<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### 支持上拉、下拉刷新
|
|
||||||
|
|
||||||
<mobile-view link="pull-refresh/enhance"></mobile-view>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue