修复显示bug
This commit is contained in:
parent
9137cddca7
commit
af32edaa54
78
README.md
78
README.md
|
|
@ -29,73 +29,13 @@
|
|||
|
||||
$ npm install --save bulma svelma-pro
|
||||
|
||||
#### scss
|
||||
### 3. scss支持
|
||||
|
||||
$ npm install --save-dev svelte-preprocess autoprefixer node-sass sass
|
||||
因为组件库使用了sass样式扩展，所以需要项目可以编译sass语法。如果没有集成，可以参考此文档。
|
||||
|
||||
|
||||
### 3. config
|
||||
在你的rollup或者webpack配置文件中添加scss支持:
|
||||
|
||||
```js
|
||||
// rollup配置 rollup.config.js
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
|
||||
// ...
|
||||
|
||||
const preprocess = sveltePreprocess({
|
||||
scss: {
|
||||
includePaths: ['src'],
|
||||
},
|
||||
postcss: {
|
||||
plugins: [require('autoprefixer')],
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
// ...
|
||||
plugins: [
|
||||
svelte({
|
||||
// ...
|
||||
preprocess: preprocess,
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// webpack配置 webpack.config.js
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
|
||||
// ...
|
||||
const preprocess = sveltePreprocess({
|
||||
scss: {
|
||||
includePaths: ['src'],
|
||||
},
|
||||
postcss: {
|
||||
plugins: [require('autoprefixer')],
|
||||
},
|
||||
});
|
||||
|
||||
module.export = {
|
||||
// ...
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /.(svelte|html)$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
options: {
|
||||
preprocess,
|
||||
// ...
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
```
|
||||
[svelte-sass-template](https://github.com/KeiferJu/svelte-sass-template)
|
||||
|
||||
### 4. 引入Bulma的CSS样式和svelma-pro组件
|
||||
|
||||
|
|
@ -116,14 +56,4 @@ module.export = {
|
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
|
||||
```
|
||||
|
||||
...或者通过npm包:
|
||||
|
||||
$ npm install --save @fortawesome/fontawesome-free
|
||||
|
||||
```html
|
||||
<!-- main.js or client.js(sapper) -->
|
||||
<script>
|
||||
import 'bulma/css/bulma.css'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
</script>
|
||||
```
|
||||
...或者下载`fontawesome-free`包,引入到静态资产目录，通过html引入.
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,7 +27,7 @@
|
|||
"chokidar": "^3.0.1",
|
||||
"codesandbox": "^2.1.6",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"rollup": "^1.0.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-babel": "^4.0.2",
|
||||
"rollup-plugin-commonjs": "^9.1.6",
|
||||
"rollup-plugin-includepaths": "^0.2.3",
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-replace": "^2.0.0",
|
||||
"rollup-plugin-scss": "^1.0.1",
|
||||
"rollup-plugin-svelte": "^5.0.1",
|
||||
"rollup-plugin-terser": "^4.0.4",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"sapper": "^0.27.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,9 +36,14 @@ export default {
|
|||
}),
|
||||
// scss(),
|
||||
svelte({
|
||||
compilerOptions:{
|
||||
// enable run-time checks when not in production
|
||||
dev,
|
||||
// generate: production ? 'dom' : 'ssr',
|
||||
hydratable: true,
|
||||
emitCss: true,
|
||||
},
|
||||
|
||||
preprocess: autoPreprocess({
|
||||
postcss: {
|
||||
plugins: [require('autoprefixer')()],
|
||||
|
|
|
|||
|
|
@ -2640,6 +2640,24 @@
|
|||
"name": "slot",
|
||||
"values": "default,left,right"
|
||||
},
|
||||
{
|
||||
"description": "显示气泡",
|
||||
"type": [
|
||||
"Boolean"
|
||||
],
|
||||
"defaultvalue": "false",
|
||||
"name": "tip",
|
||||
"values": "default,true,false"
|
||||
},
|
||||
{
|
||||
"description": "气泡显示值进行处理，例如:(e)=> e+1",
|
||||
"type": [
|
||||
"Function"
|
||||
],
|
||||
"defaultvalue": "value",
|
||||
"name": "tipRender",
|
||||
"values": "value"
|
||||
},
|
||||
{
|
||||
"isEvent": true,
|
||||
"description": "选择改变事件",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -44,7 +44,7 @@
|
|||
"postcss": "^7.0.17",
|
||||
"prettier": "^1.17.1",
|
||||
"prettier-plugin-svelte": "^0.5.1",
|
||||
"rollup": "^1.2.2",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-alias": "^1.5.1",
|
||||
"rollup-plugin-analyzer": "^3.0.1",
|
||||
"rollup-plugin-bundle-size": "^1.0.3",
|
||||
|
|
@ -53,8 +53,8 @@
|
|||
"rollup-plugin-livereload": "^1.0.4",
|
||||
"rollup-plugin-node-resolve": "^4.0.1",
|
||||
"rollup-plugin-scss": "^1.0.1",
|
||||
"rollup-plugin-svelte": "^5.0.3",
|
||||
"rollup-plugin-terser": "^4.0.4",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"sirv-cli": "^0.3.1",
|
||||
"standard-version": "^6.0.1",
|
||||
"svelte": "^3.9.2",
|
||||
|
|
|
|||
|
|
@ -29,10 +29,13 @@ export default {
|
|||
],
|
||||
plugins: [
|
||||
svelte({
|
||||
compilerOptions:{
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
// generate: production ? 'dom' : 'ssr',
|
||||
hydratable: true,
|
||||
},
|
||||
|
||||
|
||||
preprocess: autoPreprocess({
|
||||
postcss: {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { omit } from '../utils'
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
export let customClass = '';
|
||||
/** Binding value
|
||||
* @svelte-prop {String|Number} [value]
|
||||
* */
|
||||
|
|
@ -154,7 +155,7 @@
|
|||
{...props}
|
||||
type={newType}
|
||||
{value}
|
||||
class="input {statusType}
|
||||
class="input {statusType} {customClass}
|
||||
{size}
|
||||
{$$props.class || ''}"
|
||||
bind:this={input}
|
||||
|
|
@ -168,7 +169,7 @@
|
|||
<textarea
|
||||
{...props}
|
||||
{value}
|
||||
class="textarea {statusType}
|
||||
class="textarea {statusType} {customClass}
|
||||
{size}"
|
||||
bind:this={input}
|
||||
on:input={onInput}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
export let active = false;
|
||||
export let order = false;
|
||||
export let tip = false;
|
||||
export let tipRender;
|
||||
|
||||
$: if (active) setValue(pos);
|
||||
$: if (!active) setPos(value);
|
||||
|
|
@ -119,7 +120,7 @@
|
|||
<div
|
||||
class="progress-sli"
|
||||
style={progress}/>
|
||||
<Thumb bind:pos={pos[0]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[0]} {tip}>
|
||||
<Thumb bind:pos={pos[0]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[0]} {tip} {tipRender}>
|
||||
<slot name="left">
|
||||
<slot>
|
||||
<div class="thumb"/>
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
</slot>
|
||||
</Thumb>
|
||||
{#if range}
|
||||
<Thumb bind:pos={pos[1]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[1]} {tip}>
|
||||
<Thumb bind:pos={pos[1]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[1]} {tip} {tipRender}>
|
||||
<slot name="right">
|
||||
<slot>
|
||||
<div class="thumb"/>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
export let pos;
|
||||
export let value;
|
||||
export let tip;
|
||||
export let tipRender = (e)=> e;
|
||||
|
||||
function dragstart() {
|
||||
active = true;
|
||||
|
|
@ -55,6 +56,7 @@
|
|||
width: fit-content;
|
||||
height: fit-content;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumb-content::before {
|
||||
|
|
@ -81,7 +83,7 @@
|
|||
on:dragend={dragend}
|
||||
on:drag={({ detail: v }) => (pos = v)}>
|
||||
{#if tip}
|
||||
<div class="sli-tip">{value}</div>
|
||||
<div class="sli-tip">{tipRender(value)}</div>
|
||||
{/if}
|
||||
<div class="thumb-content" class:active>
|
||||
<slot/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue