SKILL.NULL - Page 2 of 15

移动端100vh的问题与解决方案

之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。

经过多方参考，实测有效的方案如下：

<style>

:root {

--vh: 1vh;

}

</style>

!(function (n, e) {

function setViewHeight() {

var windowVH = e.innerHeight / 100;

n.documentElement.style.setProperty('--vh', windowVH + 'px');

}

var i = 'orientationchange' in window ? 'orientationchange' : 'resize';

n.addEventListener('DOMContentLoaded', setViewHeight);

e.addEventListener(i, setViewHeight);

})(document, window)

</script>

使用：
[crayon-662bd9d51a5a364134370[……]

2023-03-30by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(5747)评论(0)

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You c[……]

2022-04-28by SKILLNULL React, 前端阅读(1860)评论(0)

Runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

vite.config.ts中添加

resolve: {

// 文件系统路径的别名

alias: {

'vue': 'vue/dist/vue.esm-bundler.js'

}

2022-02-14by SKILLNULL Vue 阅读(2437)评论(0)

vue3开启eslint报错：ESLint error: Parsing error: ‘＞‘ expected

.eslint.js中添加

'parser': 'vue-eslint-parser',

'parserOptions': {

'parser': '@typescript-eslint/parser'

}

2022-01-09by SKILLNULL Vue 阅读(2359)评论(0)

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue-router.js?v=2f0f3daf’ does not provide an export named ‘VueRouter’

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue-router.js?v=2f0f3daf’ does not provide an export named ‘VueRouter’
[crayon-662bd9[……]

2022-01-05by SKILLNULL Vue 阅读(2310)评论(0)

vite.config.ts基础配置分享

更多配置参考：https://vitejs.dev

vite.config.ts

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import { defineConfig } from "vite"

const fs = require("fs")

const path = require("path")

// Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中

const dotenv = require("dotenv")

const envFiles = [

/** default file */ `.env`,

/** mode file */ `.env.${process.env.NODE_ENV}`

]

for (const file of envFiles) {

const envConfig = dotenv.parse(fs.readFileSync(file))

for (const k in envConfig) {

process.env[k] = envConfig[k]

}

export default defineConfig({

define: {

'process.env': process.env

// 开发或生产环境服务的公共基础路径

base: './',

// 作为静态资源服务的文件夹

publicDir: 'assets',

plugins: [vue(), vueJsx()],

resolve: {

// 文件系统路径的别名

alias: {

'@': path.resolve(__dirname, 'src'),

'vue': 'vue/dist/vue.esm-bundler.js',

'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'

}

css: {

preprocessorOptions: {

scss: {

additionalData: '@import "./src/assets/style/index.scss";'

}

build: {

// 压缩

minify: process.env.VITE_NODE_ENV === 'production' ? 'esbuild' : false,

// 服务端渲染

ssr: false,

outDir: 'dist',

chunkSizeWarningLimit: 2000,

emptyOutDir: true,

rollupOptions: {

output: {

manualChunks(id) {

if (id.includes('node_modules')) {

return id.toString().split('node_modules/')[1].split('/')[0].toString()

}

server: {

host: process.env.VITE_HOST,

port: +process.env.VITE_PORT,

// 是否自动在浏览器打开

open: false,

hmr: true,

proxy: {

'/api': {

target: "http://127.0.0.1:99999",

changeOrigin: true

}

})

.env

# loaded in all cases

VITE_HOST = '0.0.0.0'

VITE_PORT = 8080

VITE_BASE_URL = './'

VITE_OUTPUT_DIR = 'dist'

&[……]

2022-04-28by SKILLNULL Vue 阅读(11298)评论(5)

Parsing error: Imports within a `declare module` body must always be `import type` or `import typeof`

1	npm install --dev @typescript-eslint/parser

然后.eslintrc.js中

module.exports = {

parserOptions: {

parser: "@typescript-eslint/parser",

}

2020-09-23by SKILLNULL 其他阅读(5190)评论(0)

element-ui 表格控制列显隐简单方案

核心是使用v-if控制列的显隐

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<div>

<el-table

:data="item.data"

@filter-change="value => filterChange(value,index, 'tables')"

:span-method="value => cellMerge(value,'tables')"

:header-cell-style="{background:'#fbfbfb'}"

size="mini"

doLayout

border

<el-table-column

v-for="(ele,index) in item.columns"

:label="ele.text"

:prop="ele.value"

show-overflow-tooltip

v-if="ele.flag"

:key="ele.value + index"

:resizable="false"

<span>{{scope.row[scope.column.property]}}</span>

</template>

</el-table-column>

<el-table-column

:key="item.columns.length + 1"

fixed="right"

width="50"

v-if="item.stash_columns"

:filters="item.stash_columns"

:filtered-value="item.filter_value"

:resizable="false"

</template>

</el-table-column>

</el-table>

</div>

</template>

export default {

data () {

return {

tables: [

{

data: [],

columns: [

{

text: '滴滴',

value: 'didi',

flag: true

{

text: '哒哒',

value: 'dada',

flag: true

{

text: '嘿嘿',

value: 'heihei',

flag: true

{

text: '哈哈',

value: 'haha',

flag: false

}

]

}

]

}

methods: {

// 处理数据

handlerData (type) {

const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}]

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

this.$set(this[type][index], 'data', data)

this.$set(this[type][index], 'stash_columns', item.columns)

this.$set(this[type][index], 'filter_value', [])

const columns = item.stash_columns

const filter_value = item.filter_value

columns && columns.length > 0 && columns.map((ele, idx) => {

if (ele.flag) {

filter_value.push(ele.value)

}

})

this.$set(this[type][index], 'filter_value', filter_value)

})

// 控制列显隐

filterChange (value, idx, type) {

switch (type) {

case type:

for (const ele in value) {

this.$set(this[type][idx], 'show_columns', value[ele])

}

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

const columns = item.columns

const show_columns = item.show_columns

if (show_columns && show_columns.length > 0) {

columns && columns.length > 0 && columns.map((val, key) => {

this.$set(this[type][index].columns[key], 'flag', false)

show_columns.map((ele) => {

if (val.value === ele) {

this.$set(this[type][index].columns[key], 'flag', true)

}

})

}

})

break

default:

break

}

// 合并单元格

cellMerge ({row, column, rowIndex, columnIndex}, type) {

this.$nextTick(() => {

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

const show_columns = item.show_columns

const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length

if (columnIndex === length - 1) {

return [1, 0]

} else if (columnIndex === length) {

return [0, 0]

}

})

}

mounted () {

this.handlerData('tables')

}

</script>

2020-09-11by SKILLNULL Vue 阅读(4980)评论(0)

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js)

npm i node-sass –sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

2020-08-21by SKILLNULL 其他阅读(4560)评论(0)

Superset导航栏高亮问题处理

在superset => templates => appbuilder 文件夹下找到 navbar.html 如果没有可对应新建，navbar.html内容如下

{% set menu = appbuilder.menu %}

{% set languages = appbuilder.languages %}

{% set WARNING_MSG = appbuilder.app.config.get('WARNING_MSG') %}

{% set app_icon_width = appbuilder.app.config.get('APP_ICON_WIDTH', 126) %}

{% set logo_target_path = appbuilder.app.config.get('LOGO_TARGET_PATH') or '/profile/{}/'.format(current_user.username) %}

</button>

<img

width="{{ app_icon_width }}"

src="{{ appbuilder.app_icon }}"

alt="{{ appbuilder.app_name }}"

</a>

</div>

{% if WARNING_MSG %}

</li>

{% endif %}

{% include 'appbuilder/navbar_menu.html' %}

</ul>

{% include 'appbuilder/navbar_right.html' %}

</ul>

</div>

// Highlight the navbar menu

const menus = document.querySelectorAll('.nav.navbar-nav li')

for (const menu of menus.values()) {

const menuParent = menu.parentNode && menu.parentNode.parentNode

const parentClasses = menuParent.getAttribute('class')

const classes = menu.getAttribute('class')

const as = menu.querySelectorAll('a')

for (const a of as.values()) {

const href = a.getAttribute('href')

let path = location.pathname

if (path.indexOf(href) > -1) {

menu.setAttribute('class', `${classes} active`)

if (parentClasses.indexOf('dropdown') > -1) {

menuParent.setAttribute('class', `${parentClasses} active`)

} else {

menuParent.setAttribute('class', `${parentClasses}`)

}

} else {

menu.setAttribute('class', `${classes}`)

}

</script>

2020-06-05by SKILLNULL 其他阅读(5326)评论(0)

2024年四月
一	二	三	四	五	六	日
« 8月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30