notation/src/pc/home/component/the-jianpu/index.tsx

import { NButton, NIcon, NModal, NScrollbar } from "naive-ui";
import { computed, defineComponent } from "vue";
import styles from "./index.module.less";
import { Close } from "@vicons/ionicons5";

export default defineComponent({
	name: "TheJianpu",
	props: {
		show: {
			type: Boolean,
			default: false,
		},
        abc:{
            type:String,
            default:""
        }
	},
	emits: ["update:show"],
	setup(props, { emit }) {
		const src = computed(() => {
			return `${location.origin}/jianpu/index.html?c=` + encodeURIComponent(props.abc);
		});
		return () => (
			<NModal displayDirective="if" autoFocus={false} show={props.show} onUpdate:show={(val) => emit("update:show", val)}>
				<div class={styles.jianpu}>
					<div class={styles.head}>
						<div>简谱预览</div>
						<NButton
							class={styles.close}
							quaternary
							circle
							size="small"
							onClick={() => emit("update:show", false)}
						>
							<NIcon component={Close} size={18} />
						</NButton>
					</div>
					<div class={styles.content}>
						<iframe class={styles.iframe} src={src.value}></iframe>
					</div>
				</div>
			</NModal>
		);
	},
});