style: vue format

This commit is contained in:
Rongjian Zhang 2022-02-28 11:55:04 +08:00
parent e2fbd06893
commit 2936079790
4 changed files with 34 additions and 34 deletions

View File

@ -8,8 +8,8 @@
"test": "vitest", "test": "vitest",
"postinstall": "node scripts/postinstall.mjs", "postinstall": "node scripts/postinstall.mjs",
"pub": "npm run build && lerna publish --yes", "pub": "npm run build && lerna publish --yes",
"lint": "prettier --plugin-search-dir=. --ignore-path=.gitignore --list-different packages/**/*.{ts,tsx,js,svelte,json}", "lint": "prettier --plugin-search-dir=. --ignore-path=.gitignore --list-different packages/**/*.{ts,tsx,svelte,vue,json}",
"lint:fix": "prettier --plugin-search-dir=. --ignore-path=.gitignore --write packages/**/*.{ts,tsx,js,svelte,json}", "lint:fix": "prettier --plugin-search-dir=. --ignore-path=.gitignore --write packages/**/*.{ts,tsx,svelte,vue,json}",
"docs:dev": "vitepress dev docs", "docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs", "docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs" "docs:serve": "vitepress serve docs"

View File

@ -42,17 +42,17 @@ import 'bytemd/dist/index.min.css'
```svelte ```svelte
<script> <script>
import { Editor, Viewer } from 'bytemd'; import { Editor, Viewer } from 'bytemd'
import gfm from '@bytemd/plugin-gfm'; import gfm from '@bytemd/plugin-gfm'
let value; let value
const plugins = [ const plugins = [
gfm(), gfm(),
// Add more plugins here // Add more plugins here
]; ]
function handleChange(e) { function handleChange(e) {
value = e.detail.value; value = e.detail.value
} }
</script> </script>

View File

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import * as bytemd from 'bytemd'; import * as bytemd from 'bytemd'
export default { export default {
props: { props: {
@ -22,26 +22,26 @@ export default {
const editor = new bytemd.Editor({ const editor = new bytemd.Editor({
target: this.$el, target: this.$el,
props: this.$props, props: this.$props,
}); })
editor.$on('change', (e) => { editor.$on('change', (e) => {
this.$emit('change', e.detail.value); this.$emit('change', e.detail.value)
}); })
this.editor = editor; this.editor = editor
}, },
watch: { watch: {
$props: { $props: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
// TODO: // TODO:
const copy = { ...newValue }; const copy = { ...newValue }
for (let k in copy) { for (let k in copy) {
if (copy[k] === undefined) { if (copy[k] === undefined) {
delete copy[k]; delete copy[k]
} }
} }
this.editor.$set(copy); this.editor.$set(copy)
}, },
deep: true, deep: true,
}, },
}, },
}; }
</script> </script>

View File

@ -3,38 +3,38 @@
</template> </template>
<script> <script>
import { getProcessor } from 'bytemd'; import { getProcessor } from 'bytemd'
export default { export default {
props: ['value', 'plugins', 'sanitize'], props: ['value', 'plugins', 'sanitize'],
computed: { computed: {
file() { file() {
try { try {
return getProcessor(this.$props).processSync(this.value); return getProcessor(this.$props).processSync(this.value)
} catch (err) { } catch (err) {
console.error(err); console.error(err)
} }
}, },
needUpdate() { needUpdate() {
return [this.file, this.plugins, this.sanitize]; return [this.file, this.plugins, this.sanitize]
}, },
}, },
watch: { watch: {
needUpdate: { needUpdate: {
handler(val) { handler(val) {
this.off(); this.off()
this.$nextTick(() => { this.$nextTick(() => {
this.on(); this.on()
}); })
}, },
deep: true, deep: true,
}, },
}, },
mounted() { mounted() {
this.on(); this.on()
}, },
beforeDestroy() { beforeDestroy() {
this.off(); this.off()
}, },
methods: { methods: {
on() { on() {
@ -43,24 +43,24 @@ export default {
({ viewerEffect }) => ({ viewerEffect }) =>
viewerEffect && viewerEffect &&
viewerEffect({ markdownBody: this.$el, file: this.file }) viewerEffect({ markdownBody: this.$el, file: this.file })
); )
} }
}, },
off() { off() {
if (this.cbs) { if (this.cbs) {
this.cbs.forEach((cb) => cb && cb()); this.cbs.forEach((cb) => cb && cb())
} }
}, },
handleClick(e) { handleClick(e) {
const $ = e.target; const $ = e.target
if ($.tagName !== 'A') return; if ($.tagName !== 'A') return
const href = $.getAttribute('href'); const href = $.getAttribute('href')
if (!href || !href.startsWith('#')) return; if (!href || !href.startsWith('#')) return
const dest = this.$el.querySelector('#user-content-' + href.slice(1)); const dest = this.$el.querySelector('#user-content-' + href.slice(1))
if (dest) dest.scrollIntoView(); if (dest) dest.scrollIntoView()
}, },
}, },
}; }
</script> </script>